使用jQuery显示加载指示器

Show loading indicator with jQuery

本文关键字：指示器 加载 显示 jQuery 使用      更新时间：2023-09-26

我有一个<div>，在<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>

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

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

可以使用jQuery的load()函数。它将在加载图像后运行代码。因此，如果你有一个gif显示，一旦图像加载，它会隐藏它。

Javascript

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


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

你需要的是:http://jqueryfordesigners.com/image-loading/

如果您通过AJAX加载所有图像，则使用以下方式

HTML 

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

$('#loadingDiv')
    .hide()  // hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })
;
相关文章：