JavaScript在等待之前加载所有图像

我有一个简单的JavaScript文件，可以从本地设备获取多个图像文件，并显示大量图像。到目前为止还不错

显示拇指后，我有一个按钮调用addImages（）函数。我需要显示一个幻灯片显示的图像，一次一个，3秒钟。但是，发生的情况是所有图像同时显示，然后调用sleep函数，然后删除图像。这是我的密码：

        function addImages() {
    var preview = document.querySelector('#display');
                
        async function readAndPreview(file) {
            var reader = new FileReader();
        
                reader.addEventListener("load", async function () {
                    var image = new Image();
                    image.height = 400;
                    image.width = 400;
                    image.title = file.name;
                    image.border = 5;
                    image.src = this.result;
                    preview.appendChild(image);
                    sleep(3000).then(()=> preview.removeChild(image))


                }, false);
        
            reader.readAsDataURL(file);
        }   

    if(files) {
            [].forEach.call(files, readAndPreview);
    }
    }

  function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }

看起来代码会迭代到appendChild，然后再次启动，直到添加所有图像，然后调用sleep函数，然后调用removeChild。为什么

---

任何帮助都将不胜感激。谢谢。

我已经按照您的建议更改了很多实现

主要变化：-

有一个文件读取器实例

有一个图像，我们在指定的时间后不断更改src url。（在我看到您试图在一定时间后附加和删除同一图像元素后得出此结论）。所以是的，我假设焦点总是一次一个图像，所以下面的代码

let files//我想你必须初始化一个数组
让读者；
const preview=document.querySelector（“#display”）；
让图像=新图像（）；
image.height=400；
image.width=400；
image.title=file.name；
image.border=5；
预览。追加子对象（图像）；
函数initReader（）{
reader=newfilereader（）；
reader.addEventListener（“加载”，函数（）{
image.src=this.result；
}，假）；
}
函数addImages（）{
initReader（）；
异步函数readAndPreview（）{
for（让index=0；index setTimeout（resolve，ms））；
}

我还没有运行这个程序，所以可能会有很多错误。但是这种方法应该适合您的用例

---

这种方法也有改进的余地，可以实现从一个图像到另一个图像的平滑过渡。通常可以通过blob预加载所有图像，并将它们存储在一个数组中，我们在该数组中循环并更新图像

src

。由于数据已经在客户端，速度会快得多。

我不确定

addEventListener

将对该异步回调做任何事情，除了调用它maybe？

。forEach（）

不关心其回调中的

async

回调或

await

回调（也不关心其回调中的

await

回调）中的

await

回调。您能建议对代码进行更改吗？尝试并更改此

await sleep（3000）

至

睡眠（3000）。然后（（）=>预览。移除儿童（图像））

。谢谢@kunal panchal，但同样的问题。所有图像在睡眠前加载。我需要图像1，然后睡眠，然后图像2，然后睡眠等。。。

let files // you must have an array initialized I think
let reader;
const preview = document.querySelector('#display');
let image = new Image();
image.height = 400;
image.width = 400;
image.title = file.name;
image.border = 5;
preview.appendChild(image);

function initReader(){
        reader = new FileReader();
        reader.addEventListener("load", function () {
          image.src = this.result;   
         }, false);   
}

 function addImages() { 
        initReader();        
        async function readAndPreview() {
                for (let index = 0;index<files.length;index++){
                reader.readAsDataURL(files[index]);
                await sleep(3000);
         } 
        }   
        readAndPreview();      
    }

  function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }