Show loading indicator with jQuery

Question

I have a

with an image slider in an

. There are 12 images, and it takes some time to load all of them. While the images load,

Answer 1

You can bind a listener to the load event of each image. Use a counter or some other mechanism to keep track of how many images are loaded each time the listener is invoked. Then hide the loading indicator after the last image is loaded. For example:

HTML

Loading...

    
    
    

jQuery

$(function() {
    var images = $('.large-image')
      , total = images.length
      , count = 0;

    $('#loading').show();
    images.load(function() {
        count = count + 1;
        if (count >= total) {
            $('#loading').hide();
        }
    });
});

You can see this example in action on jsFiddle: http://jsfiddle.net/hallettj/ZefaM/