加載大量圖像

Question

我正在開發一個網站，允許用戶查看和配置產品。 我想用jquery，css3和html5來啓動這個項目，並且適用於舊版瀏覽器。

我已經合併了幾個精靈中的所有最小圖像，以減少http請求的數量（圖像將從無cookie的子域中提供）。 順便說一下，對於每種配置組合，產品必須以360°的角度可見。 這產生2252個圖像（總共15mb）。

這對bandwitdh來說不是一個大問題，因爲我們有2個專用服務器，但我只是想着改善用戶體驗的最佳方式。

其實我只爲預設的產品視圖預先加載圖像，然後當用戶更改設置時，我加載所需的圖像（jQuery在這裏幫助）。當圖像加載時，用戶將選擇「加載」gif。我還應該在圖片還沒有請求時預加載嗎？

圖像將被瀏覽器緩存，因此每個圖像將是304 Not Modified響應。 您有任何建議或建議可以改善用戶體驗嗎？

謝謝。

Answer 1

如果每個產品有2252張圖像並且預加載了一張，開始預加載其他圖像似乎有點無用。據推測，觀衆會改變他的選擇，並且你需要2252張圖像中的另一張。這是一個非常低的機會，你有這個圖像預加載。

如果存在比其他更常見的各種「屬性」，您可能需要預先選擇少數幾個？例如（我不知道你的產品是什麼），如果你有一件紅色的襯衫和一件粉紅色格子XXXL襯衫，你可能需要先預先加載紅色的襯衫;）

我在情況這是玩jQuery中的動畫效果（淡入淡出，幻燈片等）。您可以在屬性更改上淡出。該動畫可能需要600毫秒，這將是從服務器獲取該圖像所需時間的很大一部分。結果是新視圖/屬性的等待時間更短。

Answer 2

從CDN像amazon s3服務的圖像可能會稍微改善加載時間。至於預裝階段 - 這可能取決於產品。有些東西更有可能被輪換 - 例如，一輛汽車在landon說的話上。我個人不會打擾轉動一件T恤，但可能是一輛汽車。所以這個決定可能是基於你網站的預期用途。