Javascript Image onload 事件绑定

Posted 2023-02-19

【中文标题】Javascript Image onload 事件绑定

【英文标题】：Javascript Image onload event binding

【发布时间】：2012-04-24 16:39:33

【问题描述】：

所以我有这段代码循环遍历数组并加载图像并在加载图像时通知。

for (var i = 0; i < arr.length; i++)                 
    var imageObj = new Image();
    imageObj.src = url[i];
    imageObj.onload= (function(i)
                return function()
                    console.log(i, 'loaded');
                
            )(i);

它工作正常。但是，如果我尝试这样做，它将无法正常工作

imageObj.addEventListener('onload', function(
    console.log(i, 'loaded');
, false);

有什么问题？在这种情况下，我有什么办法可以避免使用闭包？

【问题讨论】：

不是唯一的问题，但您的第二个损坏的示例显然是损坏的 JS，在第一行末尾缺少 i) 。

为了保险起见，不应该先分配事件再分配src吗？

【参考方案1】：

问题的一部分：事件不是称为onload，而是load。

imageObj.addEventListener('load', function()  /* ... */ , false);

除此之外，由于i 在事件侦听器函数之外发生变化，您需要一个闭包。

【讨论】：

@gillesc 一个普通的 ES5 array.forEach() 会给你一个新的范围，所以你的绑定并不总是设置在最后一个项目上。这将比遍历索引并添加您自己的闭包更少的代码。