3

我正在使用div其中包含任意数量的img元素的一个。现在，每个img都有以下 CSS：

#content > img {
display: none;
position: absolute;
top: 0px;
left: 0px;
}

并且可以使用依次显示和隐藏图像的功能循环显示图像。但是，在加载每个图像时，我想显示一个“正在加载...”图像。我想使用 JavaScript/jQuery 将每个不完整图像的源交换为“正在加载...”图像，同时仍然允许它加载。什么是精益和卑鄙的方式来做到这一点？

4

2 回答 2

5 
$(function(){
   $('<img>').attr('src','loading.gif'); // preload the "loading" image.

   $('#content > img').each(function(){
       var original = this.src;
       var $this = $(this);
       $this.attr('src','loading.gif'); // swap to loading image.
       $('<img>').attr('src',original)// pre-load original.
              .load(function(){
                 $this.attr('src',original); // swap it back when pre-load is done. 
              });
   })
});

疯狂的例子

于 2010-09-23T03:42:34.493 回答
1

有一个 imagesLoaded 插件可以在这里找到：http: //gist.github.com/268257

只需显示加载图像，绑定到imagesLoaded事件，当它被触发时，隐藏加载图像。

更新：

实际上，jQuery 现在已经内置了检测加载的方法：http: //api.jquery.com/load-event/

于 2010-09-23T03:37:22.767 回答