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

时间:2022-03-24 04:55:07

I'm trying to detect when all images in an array load and then calling a function. Works fine in all browsers but IE.

我正在尝试检测数组中的所有图像何时加载然后调用函数。在所有浏览器中工作正常,但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'
});
}
}
}

1 个解决方案

#1


2  

You can just use the document onload event.

您可以使用文档onload事件。

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

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

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading.

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

For individual image loads see jQuery's load event which is different from the identically named ajax load. This will execute when the image loads.

对于单个图像加载,请参阅jQuery的加载事件,该事件与名称相同的ajax加载不同。这将在图像加载时执行。

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

Update

更新

I think this is what OP is after. This bit of code will get each img once it is completely loaded. Once it loads a new image is created based on it and inserted into a new area (say a slideshow). In this example fiddle you can see that the two largest images will usually end up at the end of the copied image list. I also used a settimeout to load a final image after three seconds and this should always up at the end.

我认为这就是OP所追求的。一旦完全加载,这段代码将获得每个img。加载后,将根据它创建新图像并将其插入新区域(例如幻灯片)。在此示例中,您可以看到两个最大的图像通常最终位于复制的图像列表的末尾。我还使用settimeout在三秒钟后加载最终图像,这应该始终在最后。

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

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

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

#1


2  

You can just use the document onload event.

您可以使用文档onload事件。

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

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

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading.

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

For individual image loads see jQuery's load event which is different from the identically named ajax load. This will execute when the image loads.

对于单个图像加载,请参阅jQuery的加载事件,该事件与名称相同的ajax加载不同。这将在图像加载时执行。

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

Update

更新

I think this is what OP is after. This bit of code will get each img once it is completely loaded. Once it loads a new image is created based on it and inserted into a new area (say a slideshow). In this example fiddle you can see that the two largest images will usually end up at the end of the copied image list. I also used a settimeout to load a final image after three seconds and this should always up at the end.

我认为这就是OP所追求的。一旦完全加载,这段代码将获得每个img。加载后,将根据它创建新图像并将其插入新区域(例如幻灯片)。在此示例中,您可以看到两个最大的图像通常最终位于复制的图像列表的末尾。我还使用settimeout在三秒钟后加载最终图像,这应该始终在最后。

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

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

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