在执行之前，请检查是否已加载子元素(图像）

Check if children elements (images) are loaded before executing?

本文关键字：加载 元素 图像 是否 执行 检查      更新时间：2023-09-26

我有一个div，它包含许多图像。在执行一些代码之前，我想检查一下这个div中的所有图像是否都已加载。我无法处理整个文档，因为页面上还有其他东西可能需要更长的时间才能加载。

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

您应该起诉加载事件

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

有一些注意事项

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

开发人员试图使用.load（）解决的一个常见挑战快捷方式是当图像（或图像）已经完全加载。有几个已知的注意事项这一点值得注意。这些是：

  • 它在跨浏览器中工作不一致，也不可靠
  • 如果将图像src设置为与以前相同的src，则不会在WebKit中正确启动
  • 它没有正确地弹出DOM树
  • 对于已经存在于浏览器缓存中的图像，可以停止激发

你可以这样做：

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!');
      }
   });
});
相关文章：