用jQuery显示加载指示器 [英] Show loading indicator with jQuery

问题描述

我有< div> ，其中的图片滑块位于< li> 中。有12个图像，加载所有图像需要一些时间。当图像加载时，我想显示加载的GIF图像。我怎么能用jQuery做到这一点？我的代码是：

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>

推荐答案

您可以将侦听器绑定到每个的load事件图片。使用计数器或其他机制来跟踪每次调用侦听器时加载的图像数。然后在加载最后一个图像后隐藏加载指示器。例如：

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();
        }
    });
});

你可以在jsFiddle上看到这个例子： http://jsfiddle.net/hallettj/ZefaM/

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

这篇关于用jQuery显示加载指示器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！