前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >使用async await通过for循环在图片onload加载成功后获取成功的图片地址

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

作者头像
蓓蕾心晴
发布2020-04-10 16:34:16
3.4K0
发布2020-04-10 16:34:16
举报
文章被收录于专栏:前端小叙

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

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

代码实现:

代码语言:javascript
复制
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://zhuanlan.zhihu.com/p/68117645

https://stackoverflow.com/questions/46399223/async-await-in-image-loading

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-04-09 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档