专栏首页前端小叙使用async await通过for循环在图片onload加载成功后获取成功的图片地址

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

需求:有一个图片列表,我想要在图片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://zhuanlan.zhihu.com/p/68117645

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • react中实现搜索结果中关键词高亮显示

    网上看到很多js实现的关键词高亮显示,方法都是一个道理,先获取要替换的文字区域,然后在用正则匹配到关键词,并进行替换。

    蓓蕾心晴
  • iview 下拉刷新loadTop报错解决

    蓓蕾心晴
  • google跟踪代码管理器gtm无法给相同class元素绑定click事件埋点解决

    Google 跟踪代码管理器是一个跟踪代码管理系统 (TMS),可以帮助您快速轻松地更新网站或移动应用上的跟踪代码及相关代码段(统称为“代码”)。将一小段跟踪代...

    蓓蕾心晴
  • Qt(MinGW ) Windows下创建动态库

    上一次和大家分享的是Linux下Qt创建共享库并链接共享库,这次和大家分享的是Windows下Qt创建共享库并链接共享库。大家肯定注意到标题中Qt后面括号中的m...

    用户5908113
  • mysql复制

    一、复制的意义 mysql的复制功能是构建基于MySql大规模,高性能应用的基础,我们可以通过为服务器配置一个或多个备库来进行数据同步;复制功能不仅有利于构建高...

    magicsoar
  • Android App启动图启动界面(Splash)的简单实现代码

    p 第三步:将准备好的启动图片放到drawable目录下,并修改Splash的xml布局文件,如下图所示

    砸漏
  • 如何设计好的接口(Google分享)

    本文源自Google工程师joshua bloch的经验分享,楼主进行了整理和总结。 一、好接口的特性 (1)易学 (2)易用,甚至不需要文档 (3)难于误用 ...

    架构师之路
  • 金融企业存储场景分析

    金融企业中,“数据”扮演着重要的角色,因此其对数据的存储、使用也格外重视。本文将对典型金融企业中的存储场景进行分析,并针对不同场景的技术现状及未来发展进行简要说...

    用户5548425
  • 回文树总结

    最近学习了回文树,这个比较新颖的数据结构,相应的写了12道关于回文树的题目。所以总结一下。 网络上关于回文树的学习的博客有很多质量很好的,这里就不具体分析回文树...

    ShenduCC
  • python之MySQLdb库的使用

     在开发的过程中避免不了和数据库的交互,在实际环境中用的最多的Mysql数据库,那python是怎么和Mysql进行交互的呢,python使用一个叫MySQL...

    py3study

扫码关注云+社区

领取腾讯云代金券