加載到單個頁面上的合理數據量是多少？

Question

我正在爲攝影師工作page。我寫了一個jQuery腳本翻轉圖像。我最初替換src屬性，但發現有些瀏覽器在新的src完全加載之前不會更新映像，所以我最終替換了整個標籤。但是，這仍然會導致圖像在重新訪問時會重新加載的問題，因此我還會將每個圖像追加到隱藏的div，以便它們立即彈出。

瀏覽了上百張圖片之後，這個div的大小約爲10 mB。在我自己的機器上正常工作，但是有沒有一點謹慎地清空這個div？我應該期待瀏覽器能夠舒適地存儲多少數據？

Answer 1

不要保留圖片標籤，只要讓圖片留在瀏覽器緩存中，只要瀏覽器的東西有空間給他們。當他們重新訪問時，他們將從緩存加載而不是從服務器加載。

Answer 2

將所有圖像加載到文檔中的方式太多了，而且沒有必要。

正如@Guffa指出的那樣，如果您想要顯示已經加載的圖像，只需顯示它們即可。瀏覽器的緩存將幾乎立即顯示圖像。 （只有當服務器發送有趣（非標準）cache-control標題以及資源時纔是例外，但這是極不可能的。）

如果要加快顯示尚未加載的圖像，該技術被稱爲預加載。它會將圖像加載到瀏覽器的緩存中，以便在指定時立即顯示。見例如this SO question爲一些好的解決方案。有more related questions。