反应 onLoad img 事件未按预期工作

Posted 2023-02-19

【中文标题】反应 onLoad img 事件未按预期工作

【英文标题】：React onLoad img event not working as expected

【发布时间】：2018-10-16 02:27:48

【问题描述】：

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

小号加载 -> 设置背景，开始获取中号 -> 中号加载 -> 设置背景，开始获取大号

为此，我设置了一个预取元素来加载图像，onLoad，设置背景并开始预取下一个。

根据this的文章应该很简单：

<img src=image  onLoad=console.log('LOADED')/>

我应该看到LOADED 消息之后图像完全由客户端加载。

这不会发生。

我错过了什么吗？

提前致谢！

编辑：组件挂载时出现LOADED 消息。

【问题讨论】：

我将 Chrome 中的网络连接限制为“快速 3g”，因为时间裕度很大。我可以清楚地看到日志来了，而图像当时仍然出现一个片段

在下面查看我的答案。我认为你在那里缺少一个 lambda 表达式。

【参考方案1】：

问题

您缺少一个箭头函数表达式。 该函数的直接调用将导致console.log() 在组件安装后立即被触发。这是一个常见的误解，并且与语法有关。

会发生什么

功能

onLoad=console.log('LOADED') 组件安装后立即调用，因为您实际上调用的是console.log，而不仅仅是设置在触发事件时应该调用哪个function，在本例中为onLoad。

如何解决

您要做的是在其中引入一个箭头函数，以便在实际调用 onLoad 时调用该函数。

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

您可能还想从事件中传递事件属性。您可以通过为事件引入一个变量来做到这一点：

<img onLoad=(event) => this.myHandleImageLoadEvent(event) />

其中函数myHandleImageLoadEvent是在同一个类中定义的函数，并将事件作为输入参数。

【讨论】：

您能详细说明一下吗？我不确定我是否理解你的提议。对不起:(

是的，看看我更新的答案。这可能是一个不同的问题。尝试使用 lambda。

工作就像一个魅力。就是这样。

完美。 onClick 和来自组件的所有其他事件也是如此。记住不要调用该函数。如果事件onLoad 也有一些您想要捕获的事件属性，您可以使用onLoad=(event) => console.log(event) 将事件对象向下传递给控制台日志方法调用。你也可以用同样的方式调用其他方法； onLoad=(event) => this.handleOnLoad(event)

术语“lambda 表达式”是类似语法的 .net 特定术语。在 javascript/ECMA 脚本中，它们被称为 arrow functions