我正在编写一个简单的应用程序，它将图像列表作为背景（同一图像的不同大小）获取，并希望实现如下内容：
小装一件 - ＆gt;设置背景，开始获取媒体 - ＆gt;中载 - ＆gt;设置背景，开始取大
为了实现这一点，我设置了一个prefetch元素，加载图像，onLoad，设置背景并开始预取下一个。
根据this文章，它应该简单如下：
<img src={image} alt="" onLoad={console.log('LOADED')}/>
在客户端完全加载图片后，我应该看到LOADED消息。
那没有发生。
我错过了什么吗？
提前致谢！
编辑：组件安装时会显示LOADED消息。
答案 0 :(得分：4)
问题
你在那里错过了一个 lambda 表达式。
直接调用该函数将导致在安装组件后立即触发console.log()。这是一种常见的误解，与语法有关。
会发生什么
功能
onLoad={console.log('LOADED')}
一旦安装了组件，就会调用它，因为你实际上正在调用console.log而不仅仅是设置在事件被触发时应该调用哪个function，在这种情况下是onLoad 。
如何修复
你想要做的是在那里引入一个lambda表达式，以便在实际触发onLoad时调用该函数。
<img src={image} alt="" onLoad={() => console.log('LOADED')}/>
您可能还想从事件中传递事件属性。您可以通过在lambda表达式中引入变量来实现此目的：
<img onLoad={(event) => this.myHandleImageLoadEvent(event)} />
函数myHandleImageLoadEvent是在同一个类中定义的函数，并将事件作为输入参数。