javascript - 使用 jQuery，我如何检查所有图像何时加载到动态 dom 结构中？

Question

我正在向正文中添加动态内容(包括图像)。我希望能够知道新动态 dom 结构中的图像何时全部加载完毕。

HTML:

<button>
  Add dynamic content
</button>

JS:

$(document).ready(function() {
  // Append new .dynamic-container divs to the body
  $('button').click(function() {
    var newElement = $('<div class="dynamic-container"><div class="images-container"><img src="https://s3-us-west-2.amazonaws.com/cdn.simplyrets.com/properties/trial/home4.jpg" /><img src="https://s3-us-west-2.amazonaws.com/cdn.simplyrets.com/properties/trial/home-inside-4.jpg" /><img src="https://s3-us-west-2.amazonaws.com/cdn.simplyrets.com/properties/trial/home15.jpg" /><img src="https://s3-us-west-2.amazonaws.com/cdn.simplyrets.com/properties/trial/home12.jpg" /><img src="https://s3-us-west-2.amazonaws.com/cdn.simplyrets.com/properties/trial/home-inside-15.jpg" /></div></div>');

    $('body').append(newElement);

    // Perform an operation whenever all images are loaded within a newly created div.dynamic-container element
    newElement.on('load', 'img', function(){
      alert('all images have loaded');
    });
  });
});

不幸的是，这不起作用。我错过了什么？

我创建了一个 JsFiddle 来展示我在做什么:https://jsfiddle.net/cseckler/y3mpo37d/

Answer 1

如果在 Hook load 之前将图像附加到文档(甚至使用 src 创建它们)，则不能依赖 load 事件，所以你要做的是检查完整的图像；看评论:

// Perform an operation whenever all images are loaded within a newly created div.dynamic-container element
var imgs = newElement.find("img[src]"); // [src] = skip ones with no source
imgs.on("load", checkImages);
checkImages();

function checkImages() {
  var counter = 0;
  imgs.each(function() {
    if (this.complete) {
        ++counter;
    }
  });
  if (counter === imgs.length) {
    imgs.off("load", checkImages);
    // They're all loaded or failed; perform your operation
  }
}

实例:

$(document).ready(function() {
  // Append new .dynamic-container divs to the body
  $('button').click(function() {
    var newElement = $('<div class="dynamic-container"><div class="images-container"><img src="https://s3-us-west-2.amazonaws.com/cdn.simplyrets.com/properties/trial/home4.jpg" /><img src="https://s3-us-west-2.amazonaws.com/cdn.simplyrets.com/properties/trial/home-inside-4.jpg" /><img src="https://s3-us-west-2.amazonaws.com/cdn.simplyrets.com/properties/trial/home15.jpg" /><img src="https://s3-us-west-2.amazonaws.com/cdn.simplyrets.com/properties/trial/home12.jpg" /><img src="https://s3-us-west-2.amazonaws.com/cdn.simplyrets.com/properties/trial/home-inside-15.jpg" /></div></div>');

    $('body').append(newElement);

    // Perform an operation whenever all images are loaded within a newly created div.dynamic-container element
    var imgs = newElement.find("img[src]"); // [src] = skip ones with no source
    imgs.on("load", checkImages);
    checkImages();

    function checkImages() {
      var counter = 0;
      imgs.each(function() {
        if (this.complete) {
            ++counter;
        }
      });
      if (counter === imgs.length) {
        imgs.off("load", checkImages);
        // They're all loaded or failed; perform your operation
        console.log("All done!");
      }
    }
  });
});

img {
	max-width: 300px;
}

<button>
  Add dynamic content
</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

使用 complete flag在 img 元素上:

The IDL attribute complete must return true if any of the following conditions is true:

• The src attribute is omitted.
• The final task that is queued by the networking task source once the resource has been fetched has been queued.
• The img element is completely available.
• The img element is broken.

Otherwise, the attribute must return false.

(注意:上面的“attribute”不是 HTML 意义上的“属性”，只是 IDL 意义上的；complete 是一个属性。)