使用JS緩存圖像

我正在使用光柵貼圖（小冊子）構建360度查看器，該查看器使用的視圖超過85.000個圖像。爲了提高觀衆的表現，我正嘗試緩存所有圖像，但web瀏覽器總是返回：網:: ERR_INSUFFICIENT_RESOURCES使用JS緩存圖像

所以我的問題是，有沒有辦法避免這種情況？

我正在使用setInterval(foo, 1000)來做到這一點。就像這樣：

function restImg() { 
    counter = setInterval(ld, 2000); 
} 

function ld() { 
    if (!(nmb >= 80)) { 
     for (var i = 0; i < images.length; i++) { 
      var idx = images[i].indexOf("-"); 
      var path = images[i].substr(0, idx + 1); 
      nmb = parseInt(images[i].substr(idx + 1, 3)); 
      var rest = images[i].substr(idx + 4, images[i].length); 
      nmb++; 
      var img = ""; 
      if (nmb <= 9) { 
       images[i] = path + "00" + nmb + rest; 
       img = new Image(); 
       img.src = images[i]; 
      } else { 
       images[i] = path + "0" + nmb + rest; 
       img = new Image(); 
       img.src = images[i]; 
      } 
     } 
    } else { 
     clearInterval(counter); 
    } 
}

非常感謝您的幫助！

來源

2016-08-03 victoradv

所以你試圖在加載頁面時加載85,000個圖像？ 0.o嘗試僅延遲加載屏幕上實際可見的圖像。有數百個插件可以爲你做到這一點。這也將阻止你的服務器在堆中摔倒，併爲你節省了很多帶寬 –

我試圖預加載所有這些圖像，因爲在縮放或旋轉時，查看器的性能很慢或性能很差。這就是我決定這樣做的原因。它在本地服務器上正常工作，但不在遠程。如果我只加載可見圖像，則加載的下一張圖像會延遲觀看者。你能告訴我任何這些插件的名稱嗎？ – victoradv

@victoradv，你知道一個加載的圖像消耗至少寬*高* 4字節的內存;獨立於格式或文件大小。所以即使你的85000圖像只有10×10像素，它們也已經消耗了32MB。不要預先加載所有圖像，預先載入最有可能需要的圖像。第2位。不要保留對圖像節點的引用。加載圖像並依靠瀏覽器緩存。 – Thomas

爲了緩存和延遲加載圖像，現有技術的狀態是Service Workers。這將允許您對瀏覽器的緩存進行精細控制，而無需依賴每頁JavaScript。

來源

2016-08-04 09:03:35 IvanSanchez

使用JS緩存圖像

回答

相關問題