相关文章推荐
活泼的罐头  ·  Android push原理-CSDN博客·  6 月前    · 
含蓄的木耳  ·  热解读丨初秋陕北行 总书记“情”意浓·  8 月前    · 
自信的可乐  ·  北京大学医学部2015年非全日制公共卫生硕士 ...·  11 月前    · 
爽快的春卷  ·  星海镖师:唐小镖终将逆袭,只要努力,废柴也能 ...·  2 年前    · 
含蓄的显示器  ·  【图】快来抓这只小麒麟!有了它你还只看性能, ...·  2 年前    · 
Code  ›  使用async await通过for循环在图片onload加载成功后获取成功的图片地址开发者社区
https://cloud.tencent.com/developer/article/1612629
力能扛鼎的咖啡
1 年前
蓓蕾心晴

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

前往小程序,Get 更优 阅读体验!
立即前往
腾讯云
开发者社区
文档 建议反馈 控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
首页
学习
活动
专区
工具
TVP 最新优惠活动
返回腾讯云官网
蓓蕾心晴
首页
学习
活动
专区
工具
TVP 最新优惠活动
返回腾讯云官网
社区首页 > 专栏 > 使用async await通过for循环在图片onload加载成功后获取成功的图片地址

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

作者头像
蓓蕾心晴
发布 于 2020-04-10 16:34:16
3.3K 0
发布 于 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() {
        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;
 
推荐文章
活泼的罐头  ·  Android push原理-CSDN博客
6 月前
含蓄的木耳  ·  热解读丨初秋陕北行 总书记“情”意浓
8 月前
自信的可乐  ·  北京大学医学部2015年非全日制公共卫生硕士专业学位(MPH)招生简章-北京大学公共卫生学院
11 月前
爽快的春卷  ·  星海镖师:唐小镖终将逆袭,只要努力,废柴也能拯救世界!|天赋_网易订阅
2 年前
含蓄的显示器  ·  【图】快来抓这只小麒麟!有了它你还只看性能,那岂不是俗了?_汽车之家
2 年前
今天看啥   ·   Py中国   ·   codingpro   ·   小百科   ·   link之家   ·   卧龙AI搜索
删除内容请联系邮箱 2879853325@qq.com
Code - 代码工具平台
© 2024 ~ 沪ICP备11025650号