優先在網絡瀏覽器中下載圖像的技巧

Question

我有一個包含許多縮略圖（大約100）的網頁。當你點擊其中一個縮略圖時，會創建一個模式彈出窗口，這實際上是一個iframe中的新網頁。這個新的網頁包含1個大圖像。

當用戶在所有100多個縮略圖在父頁面上完成下載之前打開彈出窗口時會出現問題。用戶現在必須等待很長時間才能看到彈出窗口中的大圖像，因爲瀏覽器不知道在已經嘗試檢索的縮略圖上方優先考慮這個新圖像。

有關解決此問題的任何想法？

Answer 1

當裝載頁面時，瀏覽器排隊爲這些縮略圖100個請求。我不知道從請求隊列中刪除項目。根據瀏覽器的不同，它可能會同時請求最多6個（參見this thread），但它們仍會在模態對話框的大圖像之前排隊。你可以做什麼（從同一個線程）將模態對話框圖像託管在一個單獨的子域中，以便瀏覽器將它們放入單獨的隊列中，就好像它們位於完全不同的站點上一樣。該新隊列將被允許與縮略圖請求同時運行。

Answer 2

有趣的問題。我從來沒有遇到過這種情況。想到的解決方法是僅在用戶查看縮略圖時才加載縮略圖。

如果您正在使用jQuery，你可以嘗試使用這個插件：

Lazy Load Plugin for jQuery

Answer 3

解決此問題的一種方法是將您的小縮略圖合併爲一個大平鋪圖像，從而減少頁面上的圖像數量。

Answer 4

您可以對所有小圖像使用BASE64數據URI。 您的頁面可能變得更大，但在某些安裝中 - 整個頁面加載速度變得更快。

其他選項 - 從其他子域加載大圖像，因爲「隊列」是通過主機名。