使用async await通过for循环在图片onload加载成功后获取成功的图片地址

摘要：有一个图片列表，我想要在图片onload成功之后获取加载成功的图片列表，图片资源加载为异步，我们使用ES7的async await方式实现，多张图片，是用for循环。

需求：

有一个图片列表，我想要在图片onload成功之后获取加载成功的图片列表，图片资源加载为异步，我们使用ES7的async await方式实现，多张图片，是用for循环。

注意：

图片加载失败一定要加监听，await只有在有返回之后才会继续向下执行，无论成功与失败，否则第一张图加载失败，下面的await的都不会执行。

代码实现：

let successImageList = [];
let imageUrlList = ["https://aaa.jpg", "http://image.biaobaiju.com/uploads/20190508/17/1557306553-NZiDWHaGKu.jpg", "http://img5.imgtn.bdimg.com/it/u=3025209343,1849399022&fm=26&gp=0.jpg"]

async function getSuccessImageList() {
    try{
        let imgTotal = imageUrlList.length;
        for (let i = 0; i < imgTotal; i++) {
            //第i张图片加载完成,push到新数组中
            await addImageProcess(imageUrlList[i]).then((src) => {
                console.log(`第${i}张图片src:${src}`)
                successImageList.push(src);
            }).catch((err)=>{
                console.log(`第${i}张图片:${err}`)
            })
        }
        console.log(successImageList)
        function addImageProcess(src) {
            return new Promise((resolve, reject) => {
                let img = new Image()
                img.onload = () => resolve(src)
                img.onerror = ()=>reject("加载失败")
                img.src = src;
            })
        }
    }catch(err){
       console.log(err)
    }
}

getSuccessImageList()

原文：https://www.cnblogs.com/beileixinqing/p/12666907.html

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_8594