7

I'm loading in some html via ajax, I need an event to catch on to when the new images are loaded...

becuase it's in a div and not a whole page, I can't use $(window).load(....

I've tried the following but it doesn't work:

$('.banners_col img:last').load(function(){.....
Haroldo
  • 36,607
  • 46
  • 127
  • 169

2 Answers2

7

You need to target the results of the ajax call before inserting them in the dom.

So you need to use the callback method provided by jQuery for this reason.

$('#load').click(function(){
    // inside the handler that calls the ajax

    //you ajax call here
    $.get('the_url_to_fetch',function(data){

        // create an in-memory DOM element, and insert the ajax results
        var $live = $('<div>').html(data);

        // apply a load method to the images in the ajax results
        $('img',$live).load(function(){
           // what to do for each image that is loaded
        });

        // add the ajax results in the DOM
        $('selector_where_to_put_the_response').html($live.children());
    });

});

example at http://www.jsfiddle.net/gaby/Sj7y2/

If there are multiple images in the ajax response and you want to get notified when all of them are loaded then use this slightly modified version

$('#load').click(function(){
    // inside the handler that calls the ajax

    //you ajax call here
    $.get('the_url_to_fetch',function(data){

        // create an in-memory DOM element, and insert the ajax results
        var $live = $('<div>').html(data);
        // count the number of images
        var imgCount = $live.find('img').length;

        // apply a load method to the images in the ajax results
        $('img',$live).load(function(){
           // what to do for each image that is loaded

           imgCount--;
           if (imgCount==0)
           {
               // the code in here is called when all images have loaded.
           }
        });

        // add the ajax results in the DOM
        $('selector_where_to_put_the_response').html($live.children());
    });

});

example at http://www.jsfiddle.net/gaby/Sj7y2/1/

If you remove the comments and the empty lines, it is not much code :) so do not get intimidated..

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
  • 1
    sorry I haven't replied sooner. Just given this solution a thorough testing and it's almost there. The only issue I'm encountering is it seems that images from the cache do not cause a `.load()` event so in the event of cached images the img_count falls short.... any ideas? – Haroldo Jan 07 '11 at 12:20
  • @Haroldo, it works fine for me.. If you check the second link (example) if you re run the code the load event is fired again even though they are cached ... are you sure there is not something else going on ? if you can put a live example of your code not working it would be helpful.. – Gabriele Petrioli Jan 07 '11 at 17:54
  • This solution works great. If you want to have something like a "Loading..." dialog show as the images are loading, and then remove the dialog when the last image has been loaded I modified the above code to attach the load() method to the last image tag: $('img:last',$live).load(function(){...}); – Ethan Brown Jun 19 '12 at 14:56
  • 1
    @EthanBrown, last image in the DOM does not mean it loads last... it might be the first to load if it is the smallest... – Gabriele Petrioli Jun 19 '12 at 15:43
  • @GabyakaG.Petrioli Good point. I have noticed that this works consistently for me. I've also implemented load() to fire on all image loads to update a progress bar, and it is probably more robust just to keep count of the number of images that have loaded, and when the count of loaded images = the count of image tags, make the "whole section loaded" coding calls. Thanks! – Ethan Brown Jun 20 '12 at 16:59
  • @GabyakaG.Petrioli this is a great solution thanks for this! It is worth noting for anyone else that reads this `.load()` is now depreciated, and `.on('load', function() { ... });` should be used instead. I love the idea of loading the images into an in-memory element meaning that when you finally past it into the page everything is guaranteed to be loaded. Can this method only be applied to `` elements or can it be applied to `
    ` elements too?     – lukehillonline Mar 11 '14 at 18:14
-3

Try to use live function to trigger event for html elements from ajax

$('.banners_col img:last').live('change',function(){.....
Mohan Ram
  • 8,345
  • 25
  • 81
  • 130
  • 3
    This is wrong. The `change` event is fired only for `input`/`textarea`/`select` elements. Check the [documentation](http://api.jquery.com/change/). – Gabriele Petrioli Dec 20 '10 at 15:42