如何一個接一個地緩存圖像？ [在任何給定時間僅加載1個圖像]

在此頁面中，用戶一次查看1張圖像。右：下一張圖片。左圖：上一張圖片。我試圖總是緩衝下20個圖像。一次一個。但我一直在失敗。如何一個接一個地緩存圖像？ [在任何給定時間僅加載1個圖像]

以下代碼開始在任意給定時間緩衝下20個圖像。

我想要它到緩衝區下一個圖像在任何給定的時間。由於Internet連接不良，我不希望它同時緩衝多個圖像。

所以我試圖獲取「如果最新的圖像緩衝」完成加載信息。下面的代碼應該已經工作。但事實並非如此。它「開始同時緩衝下20個圖像」。

（假設300毫秒爲獲得在我的角度着想爲0）（我可以提供整個HTML文件，如果你需要，但它是非常簡單和短期因而它不是那麼需要在我看來）現在我只是把我管理緩衝的部分放在了一邊。可能會有一些無關的錯誤，因爲我經常修改它，但與這個問題相關的邏輯應該沒問題。

setInterval(function(){ 
    var allLoaded = true; 
    for(var i=index; i<indexToLoad; i++){ 
     $("#image"+i).onload = function() { 
      console.log("i am a noob"); 
     } 

     $("#image"+i).onerror = function() { 
      console.log("be nice"); 
      allLoaded == false; 
     } 
    } 

    if(allLoaded == true){ 
     if(indexToLoad-index < 20) 
      indexToLoad++; 
    } 

    var imageId = "image"+indexToLoad; 

    if($("#" + imageId).length == 0) { 
     $('<img />').attr({src: links[indexToLoad], id: imageId}).appendTo('body').css('display','none'); 
     //console.log("request"); 
    } 

}, 300);

這裏的互聯網連接非常薄弱。所以我試圖一次只緩衝一個圖像。但是當圖像完成加載後，我希望它緩衝數組中的下一個圖像。直到接下來的20張圖像被完全緩衝。

我是一個noob，但我花了幾個小時在這個問題上嘗試了很多方法，並失敗了。我怎樣才能實現我的目標？

任何幫助表示讚賞。謝謝！

來源

2016-02-26 user3722246

你在每次調用'setInterval'功能復位'allLoaded'到TRUE;。 _「我可以提供整個HTML文件，如果你需要的話」_是的，你可以在問題中包含'html'嗎？ – guest271314

你不明白爲什麼嗎？我應該添加所有的HTML嗎？在請求緩存新圖像之前，要確保將以前緩存的圖像完全加載。 – user3722246

如果你想緩衝圖像加載你不希望在src'設置在HTML – charlietfl

您的問題的簡單答案是使用圖像onload事件來觸發下載圖像。用window.onload事件開始緩衝圖像。

var imgIndex = 0; 
var imgIndexToLoad = 20; 
var links = new Array(); //your src array 

function BufferImage(){ 
    if(imgIndex > imgIndexToLoad){ 
     return; 
    } 
    imgIndex++; 
    var newImg = new Image(); 
    newImg.onload = function(){ 
     document.body.appendChild(this); 
     BufferImage(); 
    }; 
    newImg.id = imgIndex; 
    newImg.src = links[imgIndex-1]; 
} 
window.onload = function(){BufferImage();};

來源

2016-02-26 18:47:48 OffTheBricks

我收到了大約100個答案，至今我的問題是你的第一個有用的答案。謝謝。我用你給我的想法解決了我的問題。 – user3722246

如何一個接一個地緩存圖像？ [在任何給定時間僅加載1個圖像]

回答

相關問題