Question

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

Answer 1

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

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

中查看此示例

Answer 2

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

<强>的Javascript

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

<强> HTML

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

Answer 3

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

Answer 4

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

HTML

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

的jQuery

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

用jQuery显示加载指示器

4 个答案:

HTML

的jQuery