在JavaScript中一個接一個地加載圖像

Question

我的問題是，我有多個圖像，想要加載像preloader，但問題是我想在完成第一個圖像後開始加載第二個圖像。在我當前的代碼中，我將所有圖像存儲在一個數組中，並使用一個循環加載所有圖像（將數組的所有圖像的源代碼賦予一個圖像對象），然後開始加載所有圖像。

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']); 

無論何時加載圖像，都會觸發加載事件。當發生這種情況時，我們再次執行loadImagesInSequence（）。我們不會加載相同的圖像兩次，因爲Array.shift()從我們簡單地通過的數組中移除。