jQuery load() and how to know when dynamically added images have finished loading?

Question

With jQuery 3.3.1 load() I am adding content with a few HTML img tags inside and then I want to check the viewport for visible elements AFTER all the pictures have finished loading.

My problem is that I am unable to know when the dynamically added pictures have been fully loaded in my <div id="#content"> .

This is my JS code for loading the new content:

// Replace the #content with content from a file containing a few `img` tags
$("#content").load("image-list.html", function() {
    console.log("Now my images have fully loaded???");
});

I have tried this:

// Show me which event is triggered after load()
$(window).on("load resize scroll", function(event) {
    console.log(event);
});

// Check if I can get when the images have fully loaded
$("img").on("load", function() {
    console.log("Load image event???");
});

I also have tried some black-magic with waiting X milliseconds and looping through all image tags but this is for sure NOT the way to go as it is obscure!

The result of the above is:

• I get the Now my images have fully loaded message immediately after I have loaded the file but it does not wait to show the message to after everything has been rendered
• I do not get the console.log(event) message at all
• I do not get any Load image event messages at all

I am debugging this by slowing down the speed with Chromes network option:

Answer 1

The reason your Load image event??? log is not firing, because you are not late binding the event handler on the images, thus, the on function will not fire for images that were added dynamically to your html.

To late bind, you can modify that function the following way:

$(document).on('load', 'img', function() {
    console.log("Load image event???");
});

But if an image takes a long time to load, and you are trying to do something after all the new images were loaded which came from your image-list.html , I suggest something like the below approach:

Try putting the load listener, inside the callback function of the load method, like this:

$("#content").load("image-list.html", function() {
   var numberOfImages = jQuery("#content img").length;

   $("#content img").one('load', function() {
      numberOfImages--;
      if (numberOfImages == 0) {
           console.log("All the images have loaded");
      }
   });

   $("#content img").each(function() {
       if (jQuery(this)[0].complete) jQuery(this).trigger("load");
   }); 
});

You just have to be careful, as apparently, the load event will not fire, if the image you are loading was already cached, and loaded from the cache. There are workarounds for that too.

EDIT: The above code will take care for the situation where the images are loaded from cache also.