Figuring out when images are loaded after they are inserted using jQuery.load('url.html')

Question

I currently have something similar to this, it loads a div on the target page that has images in it.

$('a.galleryNext').click(function(){
    // chnage the image to loading
    $("#info").html("LOADING");
    $("#currentGal").load("gallery.php div#gallery"+currentgallery, function(){
        //this fires much too early, the images are still loading...
        $("#info").html("DONE");
    });
});

What I cannot figure out is how to change #info into something else after the images in the div are done loading (which happens after the load returns the html). Is there a way to do this?

Answer 1

The callback is checking that content is returned - meaning the markup is returned. You'll have to do a different check to see if the images are downloaded.

You'll have to enumerate the images in the html and check if they have been loaded.

Perhaps a solution would be getting the count of images, and incrementing a loaded counter each time an image loaded, using the .load callback function. When the loaded count matches the image count, then all content is ready.

Looks like this could be of assistance to you:

http://stackoverflow.com/questions/1098788/waiting-for-images-loading-with-jquery

EDIT

Here is a working solution, in FF. Not sure if this is the best way, or how it works in IE, but you get the idea.

        var $images = $("#somediv img");
        if ($images.length) {

            var imageCount = $images.length;
            var imageLoadedCount = 0;

            $images.each(function() {
                $(this).load(function() {
                    imageLoadedCount += 1;
                });
            });

            var intervalId = setInterval(function() {
                if (imageCount == imageLoadedCount) {
                    //console.log("all loaded");
                    clearInterval(intervalId);
                };
            }, 200);


        };

Answer 2

I like to use classes to control a loading/done gif by background-image

Also your load() syntax looked off. see: http://docs.jquery.com/Ajax/load

<style>

.done { background-image:done.gif; }
.loading { background-image:loading.gif; }

</style>
<script>
    $('a.galleryNext').click(function(){

        $("#info").addClass("loading");
        $("#info").removeClass("done");
        $("#currentGal").load("gallery.php", null, function(){

            $("#info").removeClass("loading");
            $("#info").addClass("done");
        });
    });
</script>

<div id="currentGal"></div>
<div id="info"></div>

Answer 3

This is exactly what you need. I use it all the time at work for loading huge maps and its really easy to use.

http://jqueryfordesigners.com/image-loading/