Using jQuery, how can I check when all images have loaded within a dynamic dom structure?

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/

Answers 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.)


Related Articles