Question

71

Show loading indicator with jQuery

rated 0 times [ 72] [ 1] / answers: 1 / hits: 20710 / 13 Years ago, tue, april 19, 2011, 12:00:00

I have a <div> with an image slider in an <li>. There are 12 images, and it takes some time to load all of them. While the images load, I want to show a loading GIF image. How can I do this with jQuery? My code is:

<div id=banner_slider>

<ul id=portfolio>                 



        <li>

            <a href=#><img src=gallery/2010/2010slider//01_quddus_helal.jpg alt=Slider Image border=0 /></a><br />

            <p class=caption> Quddus Helal :: 01st - 2010</p>

        </li>               





        <li>

            <a href=#><img src=gallery/2010/2010slider//02_md_moniruzzaman.jpg alt=Slider Image border=0 /></a><br />

            <p class=caption> Md Moniruzzaman :: 02nd - 2010</p>



        </li>               



   </ul>

</div>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

marquezb

Add To Favorites

Follow

Total Points: 237

Total Questions: 97

Total Answers: 89

Location: Israel

Member since Wed, Apr 14, 2021

3 Years ago

answered 13 Years ago ryderalfonsos · Accepted Answer

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

<span id=loading style=display:none>Loading...</span>

<div class=images>

    <img class=large-image src=http://astritademi.files.wordpress.com/2011/04/happy_panda.jpg width=893 height=548 />

    <img class=large-image src=http://www.pandafix.com/pandafix/images/r3387761054.jpg width=275 height=199 />

    <img class=large-image src=http://farm1.static.flickr.com/149/357563212_f8b89ac6d8.jpg width=500 height=375 />

</div>

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/