img.onload 在 IE 中给出无效参数答案

【问题标题】：img.onload gives invalid argument in IEimg.onload 在 IE 中给出无效参数
【发布时间】：2012-01-01 09:01:50
【问题描述】：

我试图检测数组中的所有图像何时加载，然后调用一个函数。在除 IE 之外的所有浏览器中都可以正常工作。

//Detect when all images load
for (var i = 0, cnt = 0; i < urls.length; i++){
  var img = new Image();
  if(nodeNames[i] == 'IMG'){
    //the following line is the problem, according to IE
    img.onload = myFunction;
    img.src = urls[i];
  }
  else if(nodeNames[i] === 'DIV'){
    setTimeout(myFunction(),1);
  }else{
    setTimeout(myFunction(),1);
  }
}
function myFunction(){
  //...lots of code
}
else{
loaded = 0;
for(var i = 0, len = slides.length; i < len; ++i){
slides[i].css({
'display':'none'
});
}
}
}

【问题讨论】：

setTimeout(myFunction,1); 也许？虽然这不是它不能在 IE 上运行的原因。
哇，这确实有效。谢谢！
考虑使用 jQuery 的 Deferred 对象。
从“myFunction()”之后开始的那段代码看起来很假 - 这只是你不小心在这里发布的杂散内容吗？
这也不考虑缓存的图像。如果图像被缓存，onload 事件可能不会触发。您需要检查 readystate 和 complete 属性以查看图像是否已被缓存。例如，查看这个 jQuery 插件：github.com/tentonaxe/jQuery-preloadImages/blob/master/…

标签： javascript jquery image onload

【解决方案1】：

您可以只使用文档 onload 事件。

https://developer.mozilla.org/en/DOM/window.onload

加载事件在文档加载过程结束时触发。在此时，文档中的所有对象都在 DOM 中，并且所有图像和子帧已完成加载。

对于单个图像加载，请参阅 jQuery 的 load event，它与同名的 ajax load 不同。这将在图像加载时执行。

$('img').load( function() {
    //do something
});

更新

我认为这就是 OP 所追求的。一旦完全加载，这段代码将获取每个 img。一旦它加载了一个新图像，就会基于它创建一个新图像并插入一个新区域（比如幻灯片）。在这个示例小提琴中，您可以看到两个最大的图像通常会出现在复制图像列表的末尾。我还使用 settimeout 在三秒后加载最终图像，这应该始终在最后。

http://jsfiddle.net/HN9KU/4/

$('img').load( function () {
    var img = new Image();
    img.src = $(this).attr('src');    
    $('#showonload').append(img);
});

【讨论】：

好吧，如果你想在通过“图像”浏览器对象加载图像时回调，那么 jQuery 对你没有多大用处。
@Pointy jQuery 也可以处理。 $(new Image()).load(fn).attr('src','foo.jpg');
@Pointy - 嗯，我想我错过了 OP 的问题。你能解释一下他在做什么吗？
哇，我从未尝试过，但我想我不应该感到惊讶 :-) 至于 OP 在做什么，我不确定；可能类似于延迟显示幻灯片小部件，直到所有图像都被缓存。
啊，我终于明白了。您有一个幻灯片，并且在加载每个图像时将其添加到幻灯片中。如果您不这样做，那么您的幻灯片中可能会有空白。我在我的答案中添加了一个示例，希望可以回答这个问题。