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.

score 12 · Accepted Answer · answered Nov 01 '09 at 20:40

12

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

answered Nov 01 '09 at 20:40

tvanfosson

524,688
99
697
795

I am having a hard time getting this working. Getting some js errors. Does anyone have an example of this? – Nic Hubbard Nov 01 '09 at 21:20
This script did work for me after I tweaked it... See my post Below – bgreater Jun 08 '10 at 16:49
@bgreater On this page http://api.jquery.com/load-event/ it says 'load' event "Can cease to fire for images that already live in the browser's cache". It is a little hard to test but I am wondering if the users click back and forth then there will be some images that have already been in the cache, which will make the 'load' event cease to fire. This is problematic because I will hide the new content until the 'load' event fires, any solution for this? – shenkwen Aug 15 '15 at 12:46

score 10 · Answer 2 · edited May 23 '17 at 12:14

10

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

edited May 23 '17 at 12:14

Community

1
1

answered Jun 08 '10 at 16:55

bgreater

1,937
3
17
16

I don't understand why `++imagesLoaded` would work. ` .load()` doesn't seem to iterate, if so , then when there are multiple images, will not `$('#someDiv').find('img').load` only fire once for the first image? – shenkwen Aug 15 '15 at 12:50
@shenkwen it's b/c a load event is added to each of the elements returned from the jQuery selector. If that is multiple images then multiple call back functions will be executed and since the `imagesLoaded` var is defined outside of the callback, it will iterate. – bgreater Sep 02 '15 at 13:58

score 0 · Answer 3 · edited Aug 30 '11 at 02:43

0

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

edited Aug 30 '11 at 02:43

answered Nov 01 '09 at 20:38

mahemoff

44,526
36
160
222

Odd. I was going to say that live doesn't support load -- and it may not -- but the load event doesn't appear in either the supported or not supported lists. Have you tested this to see if it works? – tvanfosson Nov 01 '09 at 20:42
I tried: $('#productFull img').live('load', function(){ alert('image loaded!'); }); But, that did not seem to work. Does this need to be inside the scope of the ajax function? – Nic Hubbard Nov 01 '09 at 20:44
I've not tested it, and if it's not on the supported list, there's a good chance it's not supported as it would be difficult for jQuery to implement. – mahemoff Nov 01 '09 at 20:47
It looks like "load" is not a supported event type for .live http://docs.jquery.com/Events/live – Nic Hubbard Nov 01 '09 at 20:48

Know when images are done loading in AJAX response

3 Answers3

Linked