在html上快速加載很多圖像

我編寫了一個腳本，用戶在其中選擇一個數據範圍，然後從服務器獲取一串圖像（超過150個），然後循環通過它們來製作類似電影。我想知道的是在移動圖像時加載防止延遲的最有效方法。在html上快速加載很多圖像

目前，我正在使用Ajax從服務器獲取圖像，並將它們存儲在JavaScript的Image對象數組中。在HTML中，我有一個div標籤，我希望放置圖像。我創建完所有圖像對象（並設置其適當SRC）數組中後，我做到以下幾點：

imgElem = document.createElement('img'); 
document.getElementById('loopLocation').appendChild(imgElem); 
imgElem.src = images[0].src;

此後，我只是做了最近一個電話，但改變環路指數。我每400ms就這樣做一次。該循環有效，但有時會滯後，並會在圖像上凍結更長的時間。我想知道如果我能夠從客戶端改進這一點，或者我只需要一個響應速度更快的服務器。

來源

2012-04-01 Sednus

嗯，如何在預先加載所有圖像之前開始在循環中顯示它們？或者出於某種原因，這不是一種選擇？ – Raine 2012-04-01 07:11:22

在顯示它們之前，我確實將它們放在了陣列上。 – Sednus 2012-04-01 07:14:38

是的，看到我在下面發佈的鏈接，有一種方法可以在所有圖片已經成功加載到瀏覽器緩存中的情況下運行腳本，這將允許循環避免加載它們「即時」 – Raine 2012-04-01 07:18:52

你可能想考慮spriting這是把所有的圖像放在一個大的圖像。有了這個，你只需要加載一個大的圖像，然後重新定位每個場景。

或者，在實際使用它們之前，您可能還需要預先加載這150個圖像。你可以使用JS數組來存儲Image對象，然後遍歷該數組來獲取圖像。

var images = []; 
var expectLoaded = 150; 

for(var i = 0; i<expectLoaded;i++){ 
    (function(i){ 

     //new image object 
     var img = new Image(); 

     //onload hander 
     img.onload = function(){ 

      //after load, push it into the array 
      images.push[img]; 

      //and check if the all has loaded 
      if(images.length === expectLoaded){ 
       //preload done 
      } 
     } 

     //start loading this image 
     img.src = //path to image[i]; 

    },(i)); 
}

循環阻塞UI線程。 JS是單線程的，意味着代碼以線性方式依次執行。在循環語句之後的任何內容都會等到循環結束。如果這個循環需要很長時間......請喝點咖啡。此外，由於您正在操作DOM，因此UI線程被阻止後，您看不到更改。

但有一些方法可以繞過這一點，其中一個使用超時來延遲和排隊代碼，以便稍後執行，當JS不忙時。

function animate(frameNo){ 

    //animate frame[frameNo]; 

    if(frameNo < total_frames){ //make the UI breate in between frames 
     setTimeout(function(){ //so that changes reflect on the screen 
      animate(++frameNo); //then animate next frame 
     },200);     
    } 
} 

//start 
animate(0);

來源

2012-04-01 07:10:32 Joseph

一樣。 – Sednus 2012-04-01 07:15:31

所以你有圖像，問題是幀率？ – Joseph 2012-04-01 07:19:51

嗯，有點像spritesheet – 2012-04-01 07:20:35

我同意約瑟夫的第二點意見。下面是一個很好的鏈接，可以在啓動循環之前完成圖像預加載：http://www.javascriptkit.com/javatutors/preloadimagesplus.shtml

來源

2012-04-01 07:16:22 Raine

在html上快速加載很多圖像

回答

相關問題