JavaScriptの画像を次々と読み込みます。

Question

私の問題は、複数の画像があり、プリローダーのように読み込みたいのですが、最初の画像を読み込んだ後に2番目の画像の読み込みを開始したいという問題です。私の現在のコードでは、すべてのイメージを1つの配列に格納し、ループを使用してすべてのイメージをロードします（配列のすべてのイメージのソースをイメージオブジェクトに渡します）。

Answer 1

あなたはロードイベントを見たいと思っています。

function loadImagesInSequence(images) { 
    if (!images.length) { 
    return; 
    } 

    var img = new Image(), 
     url = images.shift(); 

    img.onload = function(){ loadImagesInSequence(images) }; 
    img.src = url; 
} 

loadImagesInSequence(['a.png', 'b.png', 'c.png']); 

イメージがロードされるたびに、loadイベントが発生します。それが起こると、loadImagesInSequence（）を再度実行します。単純に通過した配列からArray.shift()が削除されたため、同じ画像を2度読み込むことはありません。