Question

我正在编写一个简单的应用程序，它将图像列表作为背景（同一图像的不同大小）获取，并希望实现如下内容：

小装一件 - ＆gt;设置背景，开始获取媒体 - ＆gt;中载 - ＆gt;设置背景，开始取大

为了实现这一点，我设置了一个prefetch元素，加载图像，onLoad，设置背景并开始预取下一个。

根据this文章，它应该简单如下：

<img src={image} alt="" onLoad={console.log('LOADED')}/>

在客户端完全加载图片后，我应该看到LOADED消息。

那没有发生。

我错过了什么吗？

提前致谢！

编辑：组件安装时会显示LOADED消息。

Answer 1

问题

你在那里错过了一个 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是在同一个类中定义的函数，并将事件作为输入参数。