Show loading indicator with jQuery

Question

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>

images in ul li are coming from ajax??? – xkeshav Apr 19 '11 at 17:53 — xkeshav, Apr 19 '11 at 17:53

score 5 · Accepted Answer · answered Apr 19 '11 at 18:05

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/

score 2 · Answer 2 · answered Apr 19 '11 at 17:55

You can use the jQuery load() function. It will run the code once the image has loaded. So if you have a gif shown, once the image has loaded, it will hide it.

Javascript

$('img#id').load(function(){
    $('#loadingGif').hide();
});

HTML

<div id="loadingGif">
    <img src="loading.gif" />
</div>

score 1 · Answer 3 · answered Apr 19 '11 at 17:54

1

This is what you need: http://jqueryfordesigners.com/image-loading/

answered Apr 19 '11 at 17:54

Calum

5,308
1
22
27

score 1 · Answer 4 · answered Apr 19 '11 at 17:56

1

if u loading all images via AJAX then use below way

HTML

<div id="loadingDiv"><img src="loading.gif"></div>

jQuery

$('#loadingDiv')
    .hide()  // hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })
;

answered Apr 19 '11 at 17:56

xkeshav

53,360
44
177
245

Reference : http://stackoverflow.com/questions/68485/how-to-show-loading-spinner-in-jquery – xkeshav Apr 19 '11 at 17:57

Show loading indicator with jQuery

4 Answers4

HTML

jQuery

Linked