jquery event once all images are loaded (including cached images)?

Question

I have the following function which is for ajaxing in a page and the showing it only once all the images are loaded:

$.get('target-page.php', function(data){    
    var $live = $('#preview_temp_holder').html(data);
    var imgCount = $live.find('img').length;
    $('img',$live).load(function(){ 
        imgCount--;
        if (imgCount==0){
            //DO STUFF HERE ONCE ALL IMAGES ARE LOADED
            $('#preview_pane').html($live.children()).fadeIn(800);
            $live.children().remove();            
        }
    });                
});

The problem comes with cached images not firing the .load() event and thus not decrementing the imgCount.

I know i need to implement Nick Craver's solution but am not sure how. Can anyone help me?

score 3 · Answer 1 · edited Oct 11 '12 at 15:41

I spent a long time looking for solutions for this. The plugin suggested on the jQuery API page (https://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js) did not work in firefox.

My solution was to loop through each image and only add the load event if it was not already loaded (i.e. cached by the browser). The code below includes a counter that I was using to check that load events were only firing for images not already in the cache:

$(document).ready(function () {

    var images = $("img.lazy");
    $(".image-wrapper").addClass("loading");

    var loadedCount = 0;
    images
        .hide()
        .each(function () {
            if (!this.complete) {
                $(this).load(function () {
                    loadedCount++;
                    console.log(loadedCount);
                    displayImage(this);
                });
            }
            else {
                displayImage(this);
            }
        });
});

function displayImage(img) {
    $(img).fadeIn(300, function () {
        $(this).parents(".image_wrapper").removeClass("loading");
    });
}

I'm no javascript expert so if you spot any problems with this solution please do let me know. As I say, it works in IE8, Chrome and Firefox (not sure about older versions of IE).

Haroldo · Accepted Answer · 2011-01-09T15:31:27.590

Ok, managed to get them merged:

$.get('target-page.php', function(data){    
    var $live =         $('#preview_temp_holder').html(data);
    var $imgs =         $live.find('img')
    var imgCount =      $imgs.length;            

    $imgs.one('load', function() {        
        imgCount--;
        if (imgCount==0){
            //DO STUFF HERE
            //ALL IMAGES ARE LOADED
            $('#preview_pane').html($live.children()).fadeIn(800);

        }        
    })
    .each(function() {
        if(this.complete){
            $(this).load();
        }
    });
});

note: a 404-ing image would break this.

I think you mean $imgs.on( ... not $imgs.one( ... – ejectamenta Dec 23 '22 at 10:51 — ejectamenta, Dec 23 '22 at 10:51

gertas · Answer 3 · 2011-01-07T14:04:05.073

0

Change:

$('img',$live).one('load', function(){
  ...
});

And after above append:

$live.find('img').each(function() {
  if(this.complete) $(this).load();
});

Generally I suggest to reuse $live.find('img') from previous count statement.

edited Jan 07 '11 at 14:04

answered Jan 07 '11 at 13:33

gertas

16,869
1
76
58

wont this fire the `.load()` event twice for non-cached images? – Haroldo Jan 07 '11 at 13:40

jquery event once all images are loaded (including cached images)?

3 Answers3

Linked