jQuery's Event for "all images loaded" after dom is modified

Question

I have a mobile page where the contents (of pages) will loaded via ajax. I'm using iScroll and I have to reinitialize it, when the content will refreshed. iScroll needs the height of the tag. And when the loaded content has to many images, i have a problem with iScroll-timing.

I know that I can use the $(window).load() event, when the main page is fresh opened. How can I use this after an ajax-call? I tested $('#mycontainer').load() but its not working. I cannot use a resize event, because the container has "100% height".

Any ideas?

Answer 1

   //get all images
   var $imgs = $('img');
   //store imgs length
   var imgLength = $imgs.length;
   // use a an index to count loaded imgs
   var i = 0;
   $imgs.each(function() {
      // onload event for each image
      $(this).load(function() {
        i += 1;
        if(imgLength === i) // all imgs loaded
      });
   });

Answer 2

You can't use $(window).load() to track dynamically inserted images after the original DOM has been loaded. Instead, you will have to track the image load status yourself. You can do that by calling this function after you've inserted the new HTML into the DOM. Pass this function a callback that will be called when the last image is loaded:

function notifyWhenAllImagesLoaded(callback) {
   var imgs = $("img");
   var cnt = imgs.length;

   function checkCnt() {
       if (cnt === 0) {
           callback();
       }
   }

   imgs.each(function() {
       if (this.complete) {
           // already loaded so count it
           --cnt;
       } else {
           // not loaded yet, so install a .load handler to let us know when it's loaded
           $(this).load(function() {
               --cnt;
               checkCnt();
           })
       }
   });
   checkCnt();
}