Promise-all 用于数组路径图像

Question

let newArr = [];
let paths = ['1.jpg', '2.jpg', '3.jpg'];
function promiseAllImg(arr) {
    for (let i = 0; i < arr.length; i++) {
        let image = document.createElement('img');
            image.src = arr[i];
        return new Promise(function(resolve, reject) {
            image.addEventListener('load', function() {
                resolve(image);
            })
            image.addEventListener('error', function() {
                reject('error');
            })
        }) 
    }           
}

newArr.push(promiseAllImg(paths));
Promise.all(newArr).then(function(res) {
    for (let i = 0; i< newArr.length; i++) {   
        document.body.appendChild(res[i])
    }
})

我需要显示所有图像，但这个程序只显示第一张图像。 我的程序有什么问题？ 编写一段代码，等待所有图像加载完毕，然后将它们循环添加到主体的末尾。

Answer 1

您正在返回一个for循环。

在循环的第一次迭代中，代码点击return并返回结束函数。

您应该用数组的map方法替换for循环。

这将为数组中的每个项目运行一个函数，然后返回一个包含所有结果（即承诺）的数组。