javascript - 如何判断 html 元素是否已完全加载？

Question

我需要知道包含图像的特殊 html 元素何时已完全加载。

这个 html 元素的问题是，单击按钮时它会在 DOM 中被完全替换。我能做什么？(顺便说一句，我不想​​为每个包含的图像分配一个处理程序。)

Answer 1

虽然很丑，但是可​​以用

var soManyImgsInHere = 0;
var fooAttachEvent = function(whereAreTheImages_Container){
  var where = whereAreTheImages_Container; //shorthand
  var length = where.length;
  soManyImgsInHere = length;
  var imgs = where.getElementsByTagName('img');
  for(var i=0;i<length;i++){
    imgs[i].onload = function(){
      soManyImgsInHere--;
      if(soManyImgsInHere == 0){
        alert('all imgs fully loaded'); // do whatever you want here :) all images are now fully loaded
      }
  }
};

假设您的图像位于 ID 为“fooImages”的 div 中

然后只需在该 div 下使用此函数即可:

<div id="fooImages">
  <img src="1.jpg" />
  <img src="2.jpg" />
  <img src="3.jpg" />
</div>
<script>fooAttachEvent(document.getElementById('fooImages'));</script>

希望这有帮助:)