javascript - 使用 jQuery 显示加载指示器

Question

我有一个<div>带有图像 slider <li> 。有 12 张图片，加载所有图片需要一些时间。图像加载时，我想显示正在加载的 GIF 图像。我怎样才能用 jQuery 做到这一点？我的代码是:

<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>

Answer 1

您可以为每个图像的加载事件绑定(bind)一个监听器。使用计数器或其他机制来跟踪每次调用监听器时加载的图像数量。然后在加载最后一个图像后隐藏加载指示器。例如:

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/