イメージを連続してロードする方法を確認する方法

Question

ここでは、ブラウザのイメージのテストをロードする簡単なテストコードがあります。ここでは、非同期のonloadイベントを使用してロードが完了した後にイメージをdomに追加します。画像はうまくロードされます。 画像を連続してリロードすると問題が発生する image-1の前にimage-2が読み込まれると、画像3が最初に読み込まれるなどの問題があります。最初のload image1のように、その後、私はそれを行うことができますページを読み込むたびにimage2、image3など。

var images = ['cat1.png','cat2.jpg','cat3.jpg']; 

var i = 0; 
images.forEach(function(elem,index,arr){ 
    var image=new Image(); 
    image.onload = function(){ 
     document.body.appendChild(image); 
     console.log(++i); 
    }; 
    image.onerror = function(){ 
     console.log('error occured'); 

    } 
    image.src = elem; 
    image.style.width = '300px'; 
    image.style.height = '300px'; 
}); 

Answer 1

あなたはonloadイベントからコールバックを待つ必要があります。 が発射された場合を反復してにロードして次の画像をロードしてください。 これは、正しい順序で画像がロードされるようにします（の配列のように）。

var images = [ 
    'http://d39kbiy71leyho.cloudfront.net/wp-content/uploads/2016/05/09170020/cats-politics-TN.jpg', 
    'error', 
    'https://s2.graphiq.com/sites/default/files/stories/t2/tiny_cat_12573_8950.jpg', 
    'http://www.bharatint.com/img/categories/our-cat-shop-image.png' 
], i = 0; 

function loadImageArrayAsync(){ 
    var image = new Image(); 
    image.onload = function(){ 
     document.body.appendChild(image); 
     if (i++ < images.length - 1) loadImageArrayAsync(); 
    }; 
    image.onerror = function(){ 
     if (i++ < images.length - 1) loadImageArrayAsync(); 
    } 
    image.src = images[i]; 
    image.style.height = '300px'; 
    image.style.width = '300px'; 
} 

loadImageArrayAsync(); 

Answer 2

これは別の方法です。それはループ内のすべての画像リクエストを起動し、応答が受信されると、どの画像を表示できるかを調べる処理を少し行います。この方法では、次の画像を要求する前に、1つの画像が読み込まれるのを待つ必要はありません。コードは、おそらく片付けを行うことができますが、あなたのアイデアを得る...

 var urls = ["/Content/images/Chrysanthemum.jpg", "/Content/images/Desert.jpg", "/Content/images/Hydwewrangeas.jpg", "/Content/images/Jellyfish.jpg", "/Content/images/Koala.jpg"] 
    var numImages = urls.length; 
    var images = [numImages]; 
    var gotResponse = [numImages]; 
    var maxDisplayed = -1; 

    function checkImages(index) { 
     // Check if previous images have been displayed 
     if (maxDisplayed == index - 1) { 
      for (i = index; i <= numImages; i++) { 
       // Check if we've received a response for this image 
       if (gotResponse[i] !== true) { 
        break; 
       } 
       maxDisplayed = i; 
       if (images[i] != null) { 
        console.log('Adding image ' + i); 
        document.body.appendChild(images[i]); 
       } 
      } 
     } 
    } 

    function imageError(index) { 
     console.log('Error loading image ' + index); 
     images[index] = null; 
     gotResponse[index] = true; 
     checkImages(index); 
    } 

    function imageLoaded(index, image) { 
     console.log('Loaded image ' + index); 
     images[index] = image; 
     gotResponse[index] = true; 
     checkImages(index); 
    } 

    function loadImages() { 
     $.each(urls, function(index, value) { 
      var image = new Image(); 
      image.onload = function() { 
       imageLoaded(index, image); 
      } 
      image.onerror = function() { 
       imageError(index); 
      } 
      image.src = value; 
      image.style.width = '300px'; 
      image.style.height = '300px'; 
     }); 
    } 

    loadImages(); 

出力例：

Error loading image 2 
Loaded image 3 
Loaded image 0 
Adding image 0 
Loaded image 1 
Adding image 1 
Adding image 3 
Loaded image 4 
Adding image 4