<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>es6</title>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<script>
// Promise加载图片
var loadImg = (url) => {
return new Promise((resolve, reject) => {
// 创建图片
var img = new Image()
// 加载成功
img.onload = () => {
resolve(img)
}
// 图片加载
img.onerror = () => {
reject(new Error('图片加载失败'))
}
img.src = url
})
}
var imgs = ['http://img4.duitang.com/uploads/item/201411/09/20141109142633_ncKBY.thumb.700_0.jpeg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1538658203&di=2405d72f77c748c885064770074fed77&imgtype=jpg&er=1&src=http%3A%2F%2Fp1.gexing.com%2Ftouxiang%2F20120801%2F0038%2F50180a1634e49_200x200_3.jpg%3Frecache%3D20131108',
'http://img3.imgtn.bdimg.com/it/u=2423321859,2979330058&fm=27&gp=0.jpg'
]
// 并行加载
var loadImgAsync = (imgs)=>{
imgs.forEach(async (item)=>{
let img = await loadImg(item)
document.body.appendChild(img)
})
}
loadImgAsync(imgs)
// 串行加载
var ImgAsync = async (imgs) => {
for (var i = 0; i < imgs.length; i++) {
let img = await loadImg(imgs[i])
document.body.appendChild(img)
}
}
ImgAsync(imgs)
</script>
</body>
</html>

async/await实现图片的串行、并行加载的更多相关文章

  1. vue使用技巧：Promise + async + await 解决组件间串行编程问题

    业务场景描述 大家都通过互联网投递过简历,比如在智联.58.猎聘等平台.投递心仪的职位前一般都需要前提创建一份简历,简历编辑界面常规的布局最上面是用户的个人基本信息,如姓名.性别.年龄.名族等,接着是 ...

  2. GCD的同步异步串行并行、NSOperation和NSOperationQueue一级用dispatch_once实现单例

    转:http://www.tuicool.com/articles/NVVnMn (1)GCD实现的同步异步.串行并行. ——同步sync应用场景:用户登录,利用阻塞 ——串行异步应用场景:下载等耗时 ...

  3. 【iOS开发-91】GCD的同步异步串行并行、NSOperation和NSOperationQueue一级用dispatch_once实现单例

    (1)GCD实现的同步异步.串行并行. --同步sync应用场景:用户登录,利用堵塞 --串行异步应用场景:下载等耗时间的任务 /** * 由于是异步.所以开通了子线程.可是由于是串行队列,所以仅仅须 ...

  4. iOS多线程——同步异步串行并行

    串行并行异步同步的概念很容易让人混淆,关于这几个概念我在第一篇GCD中有解释,但是还不够清晰,所以这里重写一篇博客专门对这几个概念进行区分: 先说一下队列和任务: (1)队列分为串行和并行,任务的执行 ...

  5. NodeJs使用async让代码按顺序串行执行

    描述 由于nodejs中的函数调用都是异步执行的,而笔者在工程开发中函数A需要四五个参数,而这四五个参数值都是通过函数调用获得,因此按顺序写代码时,执行到函数A时,往往函数A需要的参数值因为参数的异步 ...

  6. 串行&并行&并发，同步&异步

    1. 串行&并行&并发 1.1 串行 这个非常好理解,字面意思,像串成一个串一样,顺序执行 上一个没执行完的话,后面的就必须无条件等待 一般情况就是一个线程里:任务一个接一个执行,类似 ...

  7. js的并行加载以及顺序执行

    重新温习了下这段内容,发现各个浏览器的兼容性真的是搞大了头,处理起来很是麻烦. 现在现总结下并行加载多个js的方法: 1,对于动态createElement('script')的方式,对所有浏览器都是 ...

  8. requirejs：性能优化-及早并行加载

    为了提高页面的性能,通常情况下,我们希望资源尽可能地早地并行加载.这里有两个要点,首先是尽早,其次是并行. 通过data-main方式加载要尽可能地避免,因为它让requirejs.业务代码不必要地串 ...

  9. js并行加载，顺序执行

    js并行加载,顺序执行 <script>运行脚本或加载外部文件时,会阻塞页面渲染,阻塞其他资源的加载.如果页面中需要加载多个js文件,在古老浏览器中性能会比较糟糕. 因此有了最原始的优化原 ...

随机推荐

  1. 浮动( Floats )

    浮动( Float )概述 浮动和文字环绕 浮动框就是一个框在当前行被向左或向右挪动(偏移),它不在常规流中,浮动框由浮动元素的框组成. 浮动框( 'float', 'floated' or 'flo ...

  2. debian8.8安装谷歌浏览器

    第一步:下载: wget https://dl.google.com/linux/direct/google-chrome-stable_current_i386.deb   //32位 wget h ...

  3. vue结合element实现自定义上传图片、文件

    参考了很多文献,感谢各位帖子,所以也想把自己遇到不会的东西分享出来,菜鸟一枚大家一进步!

  4. Hive（二）—— 架构设计

    Hive架构 Figure 1 also shows how a typical query flows through the system. 图一显示一个普通的查询是如何流经Hive系统的. Th ...

  5. Flask pythn Web 框架总结

    Flask pythn Web 框架总结 一, Flask 介绍 Flask 是一个基于Python 实现的web 开发的'小型轻框架' 1. flask介绍 Flask是一个基于Python实现的w ...

  6. jenkins-自定义工作空间目录

  7. HotSpot Java对象创建，内存布局以及访问方式

    内存中对象的创建.对象的结构以及访问方式. 一.对象的创建 在语言层面上,对象的创建只不过是一个new关键字而已,那么在虚拟机中又是一个怎样的过程呢? (一)判断类是否加载.虚拟机遇到一条new指令的 ...

  8. mysql中造3千条数据（3种方法）

    方法一:存储过程 1.存储过程如下: delimiter $$ DROP PROCEDURE IF EXISTS data CREATE PROCEDURE data(in i int) BEGIN ...

  9. 3dmax2019卸载/安装失败/如何彻底卸载清除干净3dmax2019注册表和文件的方法

    3dmax2019提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装3dmax2019失败提示3dmax2019安装未完成,某些产品无法安装,也有时候想重新安装3 ...

  10. Users组权限Win7虚拟机继承Administrator的个性化设置

    在administrator账号下进行的模板设置,配置文件保存在“C:\Documents and Settings\Administrator”文件夹下的profile里面,但是创建的用户虚拟机获取 ...