jquery为每个图像显示预加载器？

我有一个网站用大量的图片：jquery为每个图像显示预加载器？

<img class='thumb' src=thumbs/image1.jpg/> 
<img class='thumb' src=thumbs/image2.jpg/> 
<img class='thumb' src=thumbs/image3.jpg/> 
<img class='thumb' src=thumbs/image4.jpg/>

我不知道如果我能显示加载-DIV为每一个图像，当它的加载股利皮？我为大部分动画使用jquery。我可以用jQuery解决吗？

如果每张图片都显示这个图片中间的loading-div，那将会很酷。当图像加载时，div应该隐藏起来！

这可能吗？感谢您的帮助！

来源

2010-05-13 matt

Spinners *遍布整个页面*？听起来像一场噩梦 – 2010-05-13 13:34:42

听起来像90年代，实际上。我记得有一个漂亮的绿色旋转头骨...... – 2010-05-13 13:36:25

我知道这个功能很容易编写你自己的小实现，但是我发现了由Mika Tuupola编写的'Image LazyLoad'插件就在这里：http：//www.appelsiini。净/项目/ lazyload，我建议你检查它只是因为它很棒 – KarimSaNet 2012-11-23 05:09:24

像这样的东西应该这样做：

$("img.thumb").after('<img class="spinner" scr="spinner.gif"/>'); 
$("img.thumb").load(function() { 
    $(this).next(".spinner").remove(); 
}).each(function() { 

    // if the images is loaded from cache, trigger the load event 
  if(this.complete) $(this).trigger('load'); 
});

但是，正如其他人评论说，纺纱厂都在页面上可能会惨不忍睹。

http://api.jquery.com/load-event/

来源

2010-05-13 13:37:45 karim79

，岂不是更容易做到这一点在CSS？

.thumb { 
    background: url(spinner.gif) center center; 
}

当图片加载后，它会隐藏背景图片。
注意：您可能需要给它一个宽度和高度，如果它们都是缩略图，这应该不成问题。

来源

2010-05-13 13:51:56 Sam

jquery为每个图像显示预加载器？

回答

相关问题