Question

我有一个包含许多图像的div。我想在执行某些代码之前检查此div中的所有图像是否都已加载。我无法将其从整个文档中删除，因为页面上还有其他内容可能需要更长时间才能加载。

我该怎么做？ jquery可以使用。

Answer 1

你应该起诉load event

$('img').load(function(){
   //here do what you need to do when the img is loaded
});

有一些警告

与图像一起使用时加载事件的注意事项

开发人员尝试使用.load（）解决的常见问题   快捷方式是在图像（或集合）时执行函数   图像）已完全加载。有几个已知的警告   这应该注意。这些是：


它不能始终如一地工作，也不能可靠地跨浏览器

如果图像src设置为与之前相同的src，则无法在WebKit中正确触发

它没有正确地冒泡DOM树

可以停止触发已存在于浏览器缓存中的图像

Answer 2

你可以这样做：

var files = ['a.jpg','b.png']; //defines all assets needed

$.each(files,function(){
   var tmp = new Image();
   tmp.src = this; //creates a new dummy object
   tmp.on('load',function(){
   var i = files.indexOf(this);
      files.splice(i,1); //when dummy object has loaded it gets removed from array
      if (!files.length){ //when array is empty we're all set
         alert('Preloading done!');
      }
   });
});

在执行之前检查子元素（图像）是否已加载？

2 个答案: