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爲每個圖像顯示預加載器？

回答

相關問題