使用jQuery，如何检查所有图片是否都已装入动态dom结构中？

Question

I'm adding dynamic content (including images) to the body. I want to be able to tell when the images within the new dynamic dom structure are all finished loading.

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');
    });
  });
});

Unfortunately this is not working. What am I missing?

I have created a JsFiddle to show what I'm doing: https://jsfiddle.net/cseckler/y3mpo37d/

Answer 1

You can't rely on the load event if you append the images to the document (or even create them with a src ) prior to hooking load , so what you want to do is check for completed images; see comments:

// 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
  }
}

Live Example:

 $(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> 

That uses the complete flag on img elements:

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.

(Note: "attribute" in the above doesn't mean "attribute" in the HTML sense, just the IDL sense; complete is a property .)