使用「隱藏」CSS屬性或獲取每組新圖像會更好嗎？

我試圖通過使用JSONP的jQuery AJAX調用從Flickr獲取一堆照片數據。我想每次顯示n圖像，然後每次用戶單擊按鈕時顯示下一個n圖像。使用「隱藏」CSS屬性或獲取每組新圖像會更好嗎？

我讀過的一種方法是在回調函數中將所有圖像添加到DOM中，並使用「隱藏」CSS屬性來隱藏和顯示用戶單擊的下一個圖像n。這是推薦的做法嗎？

2011-12-02 stephjang

聽起來不錯。 –

這完全取決於你想要做什麼。如果您創建了img元素並將其設置爲src，即使它們通過display: none隱藏（即使您根本不將它們添加到DOM中），瀏覽器仍會從服務器請求圖像。如果您的頁面允許用戶在查看圖像之前對圖像進行過濾，或者允許分頁，這會產生不必要的網絡流量。理想情況下，只有當用戶很可能會查看它們時，纔會預取圖像 —但是足夠早以至於用戶不會等待它們。

需要注意的是，同樣，你不必須把img元素在DOM中，直到你準備好。只需創建img元素並將其設置爲src就足夠了（try it here，該代碼根本不會將img添加到DOM中）。所以，你可以保持地圖的img元素，例如：

var preloaded = {}; 
function preload(path) { 
    var img; 
    if (!preloaded[path]) { 
     preloaded[path] = img = document.createElement('img'); 
     img.src = path; 
    } 
}

然後你讓他們當你爲他們準備好，但不必掖他們在DOM什麼地方。

來源

2011-12-02 08:51:47

是的，最好儘早加載所有圖像。這減少了用戶的等待時間，他們更有可能查看您的所有內容。

您應該加載第一ñ圖像，然後在回調加載下一個ñ（隱藏，當然），然後在其回調等等等等，直到一切都預加載。這就是說，如果你有幾百套的尺寸 n，你應該限制預加載的數量，也許只能預加載下兩三套（每次點擊進一步加載另一套）。這個想法是始終領先於用戶，所以他們永遠不用等待查看下一組圖像。

來源

2011-12-02 08:46:53

謝謝！我沒有想到將負載級聯起來。說得通。順便說一句，你所描述的與我提出的原始解決方案略有不同，它說只是一次全部預加載（這會導致初始等待時間很長）。 – stephjang

它最好通過旋轉木馬來實現。有一個flickr輪播的例子。檢查下面的鏈接可能對http://sorgalla.com/projects/jcarousel/examples/dynamic_flickr_feed.htmlou有用。

來源

2011-12-02 08:56:23 chandoo

使用「隱藏」CSS屬性或獲取每組新圖像會更好嗎？

回答

相關問題