jQuery - Know when images are done loading in ajax response

Question

I have a jQuery ajax function that loads some content into a div, some of the content is images. I would like to said until those images which where just loaded in my ajax, are finished loading, and THEN run a function, such as showing the content. This way, I won't have the content loaded into the div and the images start loading. I want them to be loaded, then put the content, or show() the content in the div.

I have seen many solutions to this, such as using .load(), but it does not seem to work for content that has been loaded using ajax.

Answer 1

$("img").load() won't work because the images are loaded dynamically; that command will only apply to images on the page at the time.

use $("img").live("load") to track when the images have loaded.

Answer 2

You need to add the load handler in the AJAX callback in order to have it apply to the images that are being loaded via the AJAX call. You may also want to have a timer set to show the content after some interval in case the images get loaded before the load handler is applied.

$.ajax({
     ...
     success: function(data) {
          var imageCount = $(data).filter('img').length;
          var imagesLoaded = 0;
          $(data).hide()
                 .appendTo('#someDiv')
                 .filter('img')
                 .load( function() {
                     ++imagesLoaded;
                     if (imagesLoaded >= imageCount) {
                        $('#someDiv').children().show();
                     }
                  });
          setTimeout( function() { $('#someDiv').children().show() }, 5000 );
      }
});

Answer 3

This is an updated version of the code tvanfosson provided. You have to make sure the imageCount variable is counting a node list and not a string as was the problem in the original code from I can deduce...

$.ajax({
                     url: 'somePage.html',  
                     dataType: "html",
                     success: function(data) {
                         $(data).hide().appendTo('#someDiv');                        
                          var imagesCount = $('#someDiv').find('img').length;
                          var imagesLoaded = 0;
                          $('#someDiv').find('img').load( function() {
                                     ++imagesLoaded;
                                     if (imagesLoaded >= imagesCount) {
                                        $('#someDiv').children().show();
                                     }
                                  });
                         var timeout = setTimeout( function() { $('#someDiv').children().show() }, 5000 );


                     }

                });