显示“加载……”图像的好技术是什么？

Question

我正在与 div 有任意数量的 img 其中的元素。现在，每个 img 具有以下CSS：

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

并且图像可以通过显示并隐藏它们的函数进行循环循环。但是，当每个图像加载时，我想显示一个“加载...”图像。我想使用javascript/jquery将每个不完整图像的来源交换为“加载...”图像 同时仍允许它加载. 。什么是瘦弱的方法？

Answer 1

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

疯狂的例子

Answer 2

这里有一个负载的插件，可以在此处找到： http://gist.github.com/268257

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

更新：

实际上，jQuery已内置用于立即检测加载的方法： http://api.jquery.com/load-event/