多くの画像をhtmlで高速に読み込む

Question

私は、ユーザがある範囲のデータを選択してから、サーバから150以上の画像を取り出して、映画。私が知りたいのは、画像を移動するときに遅れを防止するための最も効率的な方法です。

現在、私はAjaxを使用してサーバーからイメージを取得し、JavaScript上のImageオブジェクトの配列に格納しています。 HTMLには画像を置くdivタグがあります。私はすべてのImageオブジェクトを作成（およびその適切なSRCを設定）配列に終わった後、私は次の操作を行います。

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

この後、私はちょうどその最後の呼び出しを行いますが、ループインデックスを変更します。私はそれを400msごとに行う。ループは機能しますが、時には遅れて、それが想定されているより長い間イメージ上でフリーズします。私はクライアント側からこれをもう改善できるかどうかを知りたいのですが、もっと速く応答するサーバーが必要です。

Answer 1

spritingは、すべての画像を1つの大きな画像にしたいと思うかもしれません。これで、1つの大きな画像をロードしてから、すべてのシーンの位置を変更するだけで済みます。

、または実際に使用する前に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); 

Answer 2

私は彼の2番目の点についてジョセフに同意します。ループを開始する前に画像のプリロードを行うための素晴らしいリンクがあります：http://www.javascriptkit.com/javatutors/preloadimagesplus.shtml