<!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. debian8修改kde桌面语言

    apt-get install kde-l10n-zhcn, language里面改中文 亲测可用 来源:http://tieba.baidu.com/p/2489771177

  2. Clairaut 定理 证明

    (Clairaut 定理)设 $E$ 是 $\mathbf{R}^n$ 的开子集合,并设 $f:\mathbf{E}\to \mathbf{R}^{m}$ 是 $E$ 上的二次连续可微函数.那么对于一 ...

  3. MVP简要示例

      MVP即Model-View-Presenter,是从经典的MVC演变而来的,它们的基本思想有相通的地方:Controller/Presenter负责逻辑的处理.Model提供数据.View负责显 ...

  4. Linux基础篇六：Linux文件属性和类型

    -:代表文件 s: sorket文件 b:block块设备 (磁盘,光驱等) c:字符设备 l:连接文件 p:管道文件 d:代表目录文件 为了更加区分- (文件的具体类型),系统提供了file命令更加 ...

  5. php中的几种四舍五入取整、向上取整、向下取整、小数截取方法

    echo intval(4.5);echo "<br />";//直接取整,舍弃小数保留整数echo round(4.5);echo "<br /> ...

  6. Kafka(五） —— Kafka源码本地调试

    搭建环境 安装scala 安装gradle 在kafka源码的根目录执行命令 gradle wrapper gradle idea 打开IDEA,File -> Open -> kafka ...

  7. Linux_新建用户

    目录 1.新增用户 2.增加密码 新增用户:cn 进入root 输入新建命令 cn就是我们的新的用户名,也可以换成其他的 sudo useradd cn 接下来发现没有反应,是正常的,如图 查看是否新 ...

  8. 59）PHP，管理员表中所存在的项

    用户ID 用户名 用户密码 用户权限(就是他的角色等级,比如是1级  2级,  三级等等) 上次登录的IP 上次登录的时间

  9. python后端面试第八部分：制作简历和如何面试--长期维护

    ###############     就业指导    ################ 这里面有套路,你懂了这个套路,你会找到更好的工作,你会更快的找到工作, ,如何制作简历,五颗星 ,如何投递简历 ...

  10. discussion|局限性|解释|猜测|前作与同行

    讨论是整篇论文的精华和灵魂,考查作者的文献积累量和对所研究内容的理解深度,作者需要阐述为什么结果是重要的,内容包括理论.应用.在其他其他领域的作用及应用,阐述时要求直接明确. 具体而言,首先概述最重要 ...