当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 使用async await通过for循环在图片onload加载成功后获取成功的图片地址

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

2020年04月09日  | 移动技术网IT编程  | 我要评论

需求：有一个图片列表，我想要在图片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()

 

以上图片链接从百度图片获取，侵删。

参考链接：

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网