jQuery显示每个图像的预加载器？

Question

我的网站上有很多图片：

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

我想知道是否可以为每个图像显示loading-div，并且在加载时div隐藏吗？ 我的大多数动画都使用jquery。 我可以用jQuery解决吗。

如果每个图像都显示该loading-div居中于图像中间，那将很酷。 加载图像后，div应该隐藏！

那可能吗？ 谢谢您的帮助！

Answer 1

这样的事情应该做到：

$("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/

Answer 2

在CSS中这样做会更容易吗？

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

加载图像后，它将隐藏背景图像。
注意 ：您可能需要给它一个宽度和高度，如果它们都是缩略图，那应该没问题。