• 所有图片加载完再添加到页面

{
// 所有图片加载完再添加到页面
function loadImg(src) {
return new Promise(function (resolve, reject) {
let img = document.createElement('img')
img.src = src
img.onload = function () {
resolve(img)
}
img.onerror = function (err) {
reject(err)
}
})
} function showImgs(imgs) {
imgs.forEach(img => {
document.body.appendChild(img)
});
}
Promise.all([ // 所有图片加载完后执行
loadImg('http://pic37.nipic.com/20140113/8800276_184927469000_2.png'),
loadImg('http://pic37.nipic.com/20140113/8800276_184927469000_2.png'),
loadImg('http://pic37.nipic.com/20140113/8800276_184927469000_2.png')
]).then(showImgs)
}

  • 有一个图片加载完成就添加到页面

多个图片服务器, 加载最快的一个

{
// 多个图片服务器, 加载最快的一个
// 有一个图片加载完成就添加到页面
function loadImg(src) {
return new Promise((resolve, reject) => {
let img = document.createElement('img')
img.src = src
img.onload = function () {
resolve(img)
}
img.onerror = function () {
reject(err)
}
})
}
function showImg(img){
document.body.appendChild(img)
} Promise.race([ // 谁先请求到 就显示谁
loadImg('http://img2.imgtn.bdimg.com/it/u=234634259,4236876085&fm=26&gp=0.jpg'),
loadImg('http://img4.imgtn.bdimg.com/it/u=2153937626,1074119156&fm=26&gp=0.jpg'),
loadImg('http://img1.imgtn.bdimg.com/it/u=1483033257,4287748004&fm=26&gp=0.jpg')
]).then(showImg)
}

Promise场景实例之图片加载的更多相关文章

  1. Android图片加载神器之Fresco,基于各种使用场景的讲解

    Fresco是Facebook开源Android平台上一个强大的图片加载库,也是迄今为止Android平台上最强大的图片加载库. 优点:相对于其他开源的第三方图片加载库,Fresco拥有更好的内存管理 ...

  2. Android图片加载神器之Fresco, 基于各种使用场景的讲解

    Fresco是Facebook开源Android平台上一个强大的图片加载库,也是迄今为止Android平台上最强大的图片加载库. 优点:相对于其他开源的第三方图片加载库,Fresco拥有更好的内存管理 ...

  3. android 图片加载库 Glide 的使用介绍

    一:简介 在泰国举行的谷歌开发者论坛上,谷歌为我们介绍了一个名叫 Glide 的图片加载库,作者是bumptech.这个库被广泛的运用在google的开源项目中,包括2014年google I/O大会 ...

  4. iOS图片加载新框架 - FlyImage

    FlyImage 整合了SDWebImage,FastImageCache,AFNetworking的优点,是一个新的性能高效.接口简单的图片加载框架. 特点 高效 可将多张小图解码后存储到同一张大图 ...

  5. 一起写一个Android图片加载框架

    本文会从内部原理到具体实现来详细介绍如何开发一个简洁而实用的Android图片加载缓存框架,并在内存占用与加载图片所需时间这两个方面与主流图片加载框架之一Universal Image Loader做 ...

  6. Promise实现多图预加载

    Promise正如它的中文意思“承诺”一样,保存着未来会发生事件(一般为异步操作).Promise避免了“回调地狱”,写法更加接近同步操作.说到同步,我更加喜欢async.await,它们书写更贴近同 ...

  7. Android 图片加载库Glide 实战(二),占位符,缓存,转换自签名高级实战

    http://blog.csdn.net/sk719887916/article/details/40073747 请尊重原创 : skay <Android 图片加载库Glide 实战(一), ...

  8. Android图片加载框架最全解析(八),带你全面了解Glide 4的用法

    本篇将是我们这个Glide系列的最后一篇文章. 其实在写这个系列第一篇文章的时候,Glide就推出4.0.0的RC版了.那个时候因为我一直研究的都是Glide 3.7.0版本,再加上RC版本还不太稳定 ...

  9. Android图片加载框架最全解析(四),玩转Glide的回调与监听

    大家好,今天我们继续学习Glide. 在上一篇文章当中,我带着大家一起深入探究了Glide的缓存机制,我们不光掌握了Glide缓存的使用方法,还通过源码分析对缓存的工作原理进行了了解.虽说上篇文章和本 ...

随机推荐

  1. 快速排序&&归并排序

    快速排序 快速排序采用的是分治的策略,算法的具体实现过程是 1.确定一个数X(一般是选中间值X=q[l+r>>1]) 2.利用指针i,j,将数组中比X小的数放在一边,比X大的数放在另一边 ...

  2. unity探索者之UGUI图片描边

    版权声明:本文为原创文章,转载请声明https://www.cnblogs.com/unityExplorer/p/13524270.html 自从UGUI出现之后,我就已经放弃使用NGUI了,原因不 ...

  3. 【MySQL】记一次线上重大事故:二狗子竟然把线上数据库删了!!

    写在前面 估计二狗子这几天是大姨夫来了,心情很郁闷,情绪也很低落,工作的时候也有点心不在焉.让他发个版本,结果,一行命令下去把线上的数据库删了!你没听错:是删掉了线上的数据库!运营那边顿时炸了锅:怎么 ...

  4. 第三篇Scrum冲刺博客--Interesting-Corps

    第三篇Scrum冲刺博客 站立式会议 1.会议照片 2.队友完成情况 团队成员 昨日完成 今日计划 鲍鱼铭 主页页面跳转社区功能及社区设计及布局实现 搜索页面跳转.设计及布局实现 叶学涛 编写个人页面 ...

  5. 【MySQL】面试官问我:MySQL如何实现无数据插入,有数据更新?我是这样回答的!

    写在前面 马上就是金九银十的跳槽黄金期了,很多读者都开始出去面试了.这不,又一名读者出去面试被面试官问了一个MySQL的问题:向MySQL中插入数据,如何实现MySQL中没有当前id标识的数据时插入数 ...

  6. C/C++ MFC

    C++ & MFC(转载)   C++是一种静态数据类型检查的.支持多重编程范式的程序设计语言,支持过程化程序设计.数据抽象.面向对象程序设计.制作图标等泛型程序设计的多种程序设计风格. MF ...

  7. 不要盲目使用新技术,说的就是你,JWT!

    其实我更想聊标题的前半部分,后半部分只是拉出来做典型的. 简历上写上一句,"热衷于学习新技术",孬管是不是真的,至少加分项是可以有的. 再看看标题,我是来搞笑的? 学习与使用,两回 ...

  8. P4609 建筑师

    题目描述 小 Z 是一个很有名的建筑师,有一天他接到了一个很奇怪的任务:在数轴上建 n 个建筑,每个建筑的高度是 1 到 n 之间的一个整数. 小 Z 有很严重的强迫症,他不喜欢有两个建筑的高度相同. ...

  9. C++——自然数求和

    代码如下: #include <iostream> using namespace std; int main() { int a,sum=; for(int i=;i<=;i++) ...

  10. 跟着兄弟连系统学习Linux-【day02】

    day02-20200528 p6.vmvare安装与使用         官网下载安装包,个人学习的时候要求不高,所以不用安装最新版本,用不到那么多的功能,保证稳定版本就好了,然后傻瓜式安装.注意安 ...