<!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. Spring加载xml配置文件的方式

    梳理Spring的流程 xml是最常见的spring 应用系统配置源.Spring中的几种容器都支持使用xml装配bean,包括: XmlBeanFactory,ClassPathXmlApplica ...

  2. AOP统一处理修改人、创建人、修改时间、创建时间

    1.配置拦截 首先开启 <aop:aspectj-autoproxy proxy-target-class="true"/>代理.解释一下下面..的意思是多个 < ...

  3. LeetCode No.154,155,156

    No.154 FindMin 寻找旋转排序数组中的最小值 II 题目 假设按照升序排序的数组在预先未知的某个点上进行了旋转. ( 例如,数组 [0,1,2,4,5,6,7] 可能变为 [4,5,6,7 ...

  4. day56-mysql-其他查询-面试题-重点

    一.重点 面试题 1. 临时表查询: -- 查询高于本部门平均工资的人员 #1.先查询部门人员的平均工资 SELECT dept_id,AVG(salary)as sal from person GR ...

  5. Matlab高级教程_第二篇：MATLAB和C#对应数据类型的讲解（多讲一点儿C#的矩阵运算）

    1. MATLAB对应C#的数据类型主要在引入的父类库MWArray当中.有如下对应规则 .NET TYPE MWArrayTYPE MATLAB Type System.Double MWNumer ...

  6. Z变换解差分方程的思考

    问题描述 今日碰到一道差分方程的题目,如下 [ y(n + 2) - cfrac{7}{10}y(n + 1) + cfrac{1}{10}y(n) = 7x(n+2) -2 x(n + 1) ] 已 ...

  7. Serverless 基本概念入门

    从行业趋势看,Serverless 是云计算必经的一场革命 2019 年,Serverless 被 Gartner 称为最有潜力的云计算技术发展方向,并被赋予是必然性的发展趋势.Serverless ...

  8. Linux shell Script初识

    shell secript: 执行方式的差异: ./ sh执行都是在创建一个子程序来执行,只会继承环境变量, 其中的变量如果export声明,子程序的子程序会继承,不会升级为环境变量 source 的 ...

  9. 使用yum仅下载不安装

    安装工具 yum install yum-utils yum install yum-plugin-downloadonly yum install yumdownloadonlyyum instal ...

  10. 数字签名和数字证书等openssl加密基本术语

    openssl 算法基础 1.1 对称算法 : 密钥相同,加密解密使用同一密钥 1.2 摘要算法:无论用户输入的数据什么长度,输出的都是固定长度的密文:即信息摘要,可用于判断数据的完整性:目前常用的有 ...