重圖像的預加載掛腳本

IM在一個圖片庫工作具有高分辨率的圖像（像1280x1400px），實際上我的腳本執行此客戶端：重圖像的預加載掛腳本

負載的第一圖像，並顯示它
加載第一張圖片時，加載該圖庫的所有縮略圖（每張200x440像素或類似物）
當所有縮略圖加載時，從縮略圖開始緩存所有圖像（我的意思是完整分辨率圖像），所以當用戶選擇列表上的第二張圖片時，它已經預先加載了

問題是，當縮略圖中的第二張圖片開始預加載時，瀏覽器非常慢並且感覺會掛起，看起來好像是佔用太多內存或CPU，我真的不知道。

有沒有什麼方法可以像並行預加載它？或者也許有另一種方式來「快速加載」圖片庫？我一直在想每個圖像的2個版本都是一個非常低分辨率的圖像作爲佔位符，然後加載實際圖像並將其替換（我認爲這是Google Plus圖庫的工作原理）

我的主要目標是有一個非常非常快的畫廊，因爲它可能有點慢，當用戶單擊圖像（每個文件爲200〜300KB）

謝謝

來源

2011-09-20 Javis Perez

如何使用CSS sprites的技術爲您的縮略圖？這將允許您有一個包含所有縮略圖的大圖像。

預加載所有圖像的方法似乎有點過分（沒有人擔心帶寬使用率？）。爲了快速交付，您可以使用商業CDN (content delivery network)來代替它們。

來源

2011-09-20 14:10:41

非常非常遲的答案我知道，但我有點忙，但是我正在考慮轉移到商業CDN，我認爲它的一個好主意CSS縮略圖的縮略圖！謝謝 –

提供例子，你是如何試圖預裝的形象呢？並行預載多張圖片的最簡單的例子是像

<script type="text/javascript"> 
    var photos = ["/images/foto1.jpg", "/images/foto2.jpg", "/images/foto3.jpg"]; 
    var images = new Array(); 
    for(var i = 0; i < photos.length; i++) 
    { 
     images[i] = new Image(); 
     images[i].src = photos[i]; 
    } 
</script>

來源

2011-09-20 14:05:27 Trogvar

Richard Ev給出了很好的答案。我想添加一種可能有用的內容傳送技術，即將資源分散到多個子域中。最好的解釋（包括限制等）可以找到here，然而this IE link和this paper也是很好的閱讀。

基本上，由於實現舊HTTP標準的瀏覽器限制，圖像不會以高並行性（或任何內容）下載（標準是量化打開的連接），但您可以誘使瀏覽器打開更多連接在多個子域上傳播資源傳遞。正如文章中提到的那樣，這種傳播的上限超過了它實際上減慢的速度。

希望這會有所幫助（它可能會或可能不相關），或者至少會教你一些新的東西。

來源

2011-09-20 14:27:18 davin

重圖像的預加載掛腳本

回答

相關問題