var url='jsonp-master/0.jpg'
var url1='jsonp-master/1.jpg'
var url2='jsonp-master/2.jpg'
var img=document.createElement('img');
var img1=document.createElement('img');
var img2=document.createElement('img');
img.src=url;
img1.src=url1;
img2.src=url2; function loading(img){
return new Promise(function(resolve,reject){
img.onload=function(){
resolve(img)
}
})
}
//图片预加载 等所有图片都加载完毕后统一显示
Promise.all([
loading(img),loading(img1),loading(img2)
]).then(function(res){
for(var i=0;i<res.length;i++){
document.body.appendChild(res[i])
}
})
//谁加载的快就显示谁
Promise.race([
loading(img),loading(img1),loading(img2)
]).then(function(res){
document.body.appendChild(res)
})

  

用promise做图片的预加载的更多相关文章

  1. Promise实现多图预加载

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

  2. JS 实现图片的预加载(转载)

    图片预加载是web开发中一种应用相当广泛的技术,比如我们在做图片翻转显示等特效的时候,为了让图片在转换的时候不出现等待,我们最好是先让图片下载到本地,然后在继续执行后续的操作. 下面的函数实现了一个我 ...

  3. [转]Javascript实现图片的预加载详解

    下面的函数实现了一个我们想要的最基本的图片预加载效果 function preloadimages(arr){ var newimages=[] var arr=(typeof arr!=" ...

  4. Javascript实现图片的预加载的完整实现

    图片预加载是web开发中一种应用相当广泛的技术,比如我们在做图片翻转显示等特效的时候,为了让图片在转换的时候不出现等待,我们最好是先让图片下载到本地,然后在继续执行后续的操作.今天我们将来实现一个完整 ...

  5. ViewPager做图片浏览器,加载大量图片OOM的问题修正

    /** * @author CHQ * @version 1.0 * @date 创建时间: 2016/7/26 17:18 * @parameter * @return * 图片查看器 * //可以 ...

  6. Jquery实现图片的预加载与延时加载

    有很多项目经常会需要判断图片加载完成后执行相应的操作,或者需要图片延迟加载,网上虽然已经有很不错的插件,但要为这些效果还得单独加载一个插件的话总感觉有点不舒服,干脆自己写了个方法: 1 2 3 4 5 ...

  7. flex 实现图片播放 方案一 图片全部预加载放内存

    这种方案,对于web的应用有局限性,在图片量比较多,比较大的时候,就会爆浏览器异常.一般建议轻量级的采用这种方案. <?xml version="1.0" encoding= ...

  8. ajax点击加载更多数据图片(预加载)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. Javascript图片预加载详解

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

随机推荐

  1. Python——基本运算符

    计算机不止可以进行加减乘除,还可以进行多种运算,比如算数运算,逻辑运算,赋值运算等 算数运算 以下假设变量:a=10,b=20 比较运算 以下假设变量:a=10,b=20 赋值运算 以下假设变量:a= ...

  2. 洛谷 P1593 因子和

    https://www.luogu.org/problemnew/show/P1593#sub 利用约数和定理:可以去看一下公式第13条 然后这个题目的话,要求$a^b$,那么我们首先可以先将a分解然 ...

  3. EditPlus 比较完整的快捷键记录

    FileFtpUpload Ctrl+Shift+S 上传文件到FTP 服务器 FileNew Ctrl+N 新建普通的文本文档 FileNewHtml Ctrl+Shift+N 创建一个空白的 HT ...

  4. Python基础-包与模块

    Python基础-包与模块 写在前面 如非特别说明,下文均基于Python3 摘要 为重用以及更好的维护代码,Python使用了模块与包:一个Python文件就是一个模块,包是组织模块的特殊目录(包含 ...

  5. GoF23种设计模式之行为型模式之迭代器模式

    一.概述    给定一种语言,定义它的文法的一种表示,并定义一个解释器,这个解释器使用该表示来解释语言中的句子.二.适用性1.当访问一个聚合对象的内容而无需暴露它的内部表示的时候.2.当对聚合对象的多 ...

  6. CodeForces - 899E Segments Removal (优先队列 + 链表)

    给定一个序列,每次从序列中找一个长度最大的元素相同的片段,删除它. 如果长度相同,删除最靠左边的那个片段. 问,需要删几次. 用链表处理删除片段.对于删除之后两边又能连成一个片段的那种情况,用set记 ...

  7. poj 1979 走多少个‘ . '问题 dfs算法

    题意:给你一个迷宫地图,让你走.问最多可以走多少个“." 思路:dfs 找到起点,然后对起点进行dfs操作. dfs操作时,要把当前的位置标志成"#"表示已经走过,然后进 ...

  8. POJ 3057 网络流 Evacuation

    题意: 有一个n×m的房间,四周每个格子要么是墙要么是门.中间部分是墙或者人. 现在所有人要从房间逃出去,每个人的速度为1,也就是每个单位时间只能向上下左右四个方向走一格. 多个人可以站在同一个格子上 ...

  9. Apache ant 配置

    ANT_HOME C:\Program Files(D)\apache-ant-1.10.1Path %ANT_HOME%/binant -v

  10. LoadRunner11使用方法以及注意点收集

    一:安装loadrunner http://jingyan.baidu.com/article/f7ff0bfc1cc82c2e26bb13b7.html http://www.cnblogs.com ...