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;
}

加載圖像后，它將隱藏背景圖像。
注意 ：您可能需要給它一個寬度和高度，如果它們都是縮略圖，那應該沒問題。