从数组中添加图像，在循环完成之前不会刷新内容

Adding images from array, content not refreshed until loop finishes

本文关键字：新内容 刷新 循环 数组 添加 图像      更新时间：2023-09-26

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

谢谢

尝试使用 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();

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

相关文章：