如何確保所有圖像正確加載

在我的HTML頁面中，我加載了來自相同域的大約40個圖像（在頁面啓動時，所有圖像同時加載）。問題是，有時某些圖像不顯示，它們只是一個白色的盒子，左上方有一個紅色的X.但是，如果我嘗試刷新頁面一次（或幾次），那麼該圖像將正常加載。如何確保所有圖像正確加載

有誰知道爲什麼發生這種情況，以及如何確保所有圖像加載罰款？

來源

2012-07-23 omega

40張圖片需要很多加載，尤其是來自同一個域 - 對於大多數用戶而言，開銷會非常高，如果可以（例如使用圖片精靈），可能需要重新考慮。但是，如果你已經死了，那麼在你的互聯網連接上提供一些信息，你在哪個服務器上運行它，基於什麼等 - 可能在一端或另一端不可靠。你能檢查服務器日誌，看看請求是否完成了嗎？ – wizzardmr42 2012-07-23 17:39:13

發生這種情況是因爲圖像未及時完成加載。你可以嘗試pre-loading them with javascript

我會做的是確保圖像很小（使用縮略圖），以便他們將加載。然後，一次只加載幾個，並在頁面滾動時或用戶請求更多圖像時加載更多。

查看谷歌圖片或pinterest瞭解它如何工作的例子。在您滾動頁面時，會加載更多圖像，而不是一次加載所有圖像。

來源

2012-07-23 17:23:39 user1477388

這與使用標籤加載圖像之間的區別是什麼？ – omega 2012-07-23 17:25:32

因爲它們都將圖像放入緩存中，所以幾乎沒有區別，除非您可以在需要之前將圖像放入緩存中。在您的實例中並不需要它們，因爲您需要將它們加載到主頁上，而不僅僅是一個子頁面。最好的辦法是確保你正在加載縮略圖，而不是全尺寸的圖像，並逐漸加載它們，因爲用戶請求它們。 – user1477388 2012-07-23 17:58:47

如何確保所有圖像正確加載

回答

相關問題