jQuery爲每個縮略圖加載div直到加載

我有一個包含50個縮略圖的頁面，一旦用戶進入網站就會加載。jQuery爲每個縮略圖加載div直到加載

我正在尋找創建一個loading... div或可能使用動畫gif來顯示縮略圖圖像仍在加載，然後切換到圖像加載後。

什麼是最好的選擇，純粹的JS或jQuery，以及如何處理這樣的事情？

在此先感謝

2010-08-02 ApPeL

是固定寬度和高度的縮略圖嗎？

好，繼承人如何做到這一點的想法...

var loading = $('<img src="loading.gif" alt="loading" />'); 
$('#thumbnail').each(function(){ 
    var loadIMG = loading.clone(); 
    $(this).after(loadIMG).load(function(){ 
     $(this).show(); 
     loadIMG.hide(); 
    }).hide(); 
});

資源

來源

2010-08-02 10:04:38 Reigel

雖然由於某種原因，它似乎沒有從FF中的「加載」狀態切換到「圖像加載」？ – ApPeL 2010-08-02 16:44:08

任何想法，爲什麼這不會在FF工作？ – ApPeL 2010-08-05 07:37:00

，因爲你可能使用重複的'ID'（#thumbnail）...嘗試改變它到類。（.thumbnail） – Reigel 2010-08-05 07:43:57

你可以使用純JavaScript，避免了jQuery庫的開銷。但是，如果你已經在你的網站上使用它，那麼爲什麼不使用它。

來源

2010-08-02 09:53:18 pritaeas

您可以綁定到圖像的加載事件。

var img = new Image(640, 480); 
img.src = '...'; 
$(img).bind('load', function() { 
    // Has loaded 
});

也許每幅圖像都在li之內。你可以加載頁面li的loading。使用CSS來表示樣式，以便看起來您希望如何裝載位。綁定到圖像的load事件並在回調中從父級li中刪除loading類。

來源

2010-08-02 10:12:03 dylanfm

您可以使用$(window).ready()而不是$(document).ready()。如果document在DOM準備就緒時觸發，window將在所有元素準備就緒時觸發。唯一的問題是，如果你有任何外部文件，並且服務器不可用，你的腳本將不會觸發。

來源

2010-08-02 10:41:46

jQuery爲每個縮略圖加載div直到加載

回答

相關問題