【问题标题】:Javascript Image onload event bindingJavascript Image onload 事件绑定
【发布时间】: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吗?

标签: javascript html javascript-events


【解决方案1】:

问题的一部分:事件不是称为onload,而是load

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

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

【讨论】:

  • @gillesc 一个普通的 ES5 array.forEach() 会给你一个新的范围,所以你的绑定并不总是设置在最后一个项目上。这将比遍历索引并添加您自己的闭包更少的代码。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-07-08
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多