從數組中添加圖像，內容未刷新，直到循環結束

Question

我有一些代碼循環遍歷基本64圖像的數組，爲每個圖像創建一個新元素並將其附加到div。

for(var i = 0; i<500; i++){ 
    var image = document.createElement('img'); 
    image.src = 'data:image/png;base64,' + base64Data; 
    image.alt = fileName; 
    chapter.appendChild(image); 
} 

我的問題是圖像直到整個數組完成後才顯示。我需要一些幫助，以確保每個圖像被附加到div後顯示。這樣，如果數組的長度很大，我仍然可以顯示其他正在處理的初始圖像。

感謝

Answer 1

嘗試使用的setTimeout：

var container, arr, counter, insertImages; 

arr = ['xyz', 'abc']; 
counter = 0; 
container = document.getElementsByTagName('body')[0]; 

insertImages = function() { 
    var src, image; 

    // Get the next src, create & inject the element 
    src = arr[counter]; 
    image = document.createElement('img'); 
    image.src = src; 
    container.appendChild(image); 

    // Increment the counter and repeat (if necessary) 
    counter++; 
    if (counter < arr.length) setTimeout(insertImages, 50); 
}; 

// Kick it off 
insertImages(); 

您可能能夠減少超時延遲 - 看看有什麼效果