从数组中添加图像，直到循环完成才刷新内容答案

【问题标题】：Adding images from array, content not refreshed until loop finishes从数组中添加图像，直到循环完成才刷新内容
【发布时间】：2016-05-28 12:42:14
【问题描述】：

我有一些代码循环遍历 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 后显示每个图像。这样，如果数组的长度很大，我仍然可以在处理其余图像的同时显示初始图像。

谢谢

【问题讨论】：

使用有关代码的更多信息编辑您的问题。什么是章节？ base64Data的值是多少？

标签： javascript html image for-loop base64

【解决方案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();

您也许可以减少超时延迟——看看什么有效

【讨论】：