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. C#基于联通短信Sgip协议构建短信网关程序

    此软件基于中国联通Sgip协议程序接口,适合在中国联通申请了短信发送端口的公司使用.短信群发已经成为现在软件系统.网络营销等必不可少的应用工具.可应用在短信验证.信息群发.游戏虚拟商品购买.事件提醒. ...

  2. Mysql常用运算符与函数汇总

    Mysql常用运算符与函数汇总 本文给大家汇总介绍了mysql中的常用的运算符以及常用函数的用法及示例,非常的全面,有需要的小伙伴可以参考下 我们先把数据表建好 use test;create tab ...

  3. cocos2dx lua 打印和保存日志

    在2d游戏中,经常会出现闪退或者报错的问题,通过写文本,将日志文件发送给服务端,让后端人员进行分析. 通过lua打印日志在文本文件中: local file = io.open(cc.FileUtil ...

  4. 【转】PCA算法学习_1(OpenCV中PCA实现人脸降维)

    前言: PCA是大家经常用来减少数据集的维数,同时保留数据集中对方差贡献最大的特征来达到简化数据集的目的.本文通过使用PCA来提取人脸中的特征脸这个例子,来熟悉下在oepncv中怎样使用PCA这个类. ...

  5. k8s调度的预选策略及优选函数

    scheduler调度过程:    Predicate(预选)-->Priority(优选)-->Select(选定)调度方式:    1.节点亲和性调度(NodeAffinity)使用n ...

  6. 设置mysql允许外部连接访问

    错误信息: SQL Error (1130): Host ‘192.168.1.88’ is not allowed to connect to this MySQL server 说明所连接的用户帐 ...

  7. React和Vue组件间数据传递demo

    一.React (一)父组件向子组件传数据 简单的向下传递参数 /* Parent */ class App extends Component { render() { return ( <d ...

  8. destoon 列表页面增加手动选择排序方式

    在mobile/include/mall.inc.php  行60  $order = $MOD['order']; 之前增加 排序方式判断 如果有order参数则$order接受参数,没有就用默认  ...

  9. python爬虫基础09-selenium大全3/8-Remote Webdriver

    Selenium笔记(3)Remote Webdriver 本文集链接:https://www.jianshu.com/nb/25338984 简介 selenium.webdriver.remote ...

  10. 有关fcrackzip的使用介绍(来自网络)

    本文转自:http://longxiaz.blog.163.com/blog/static/131452420201282844545197/ 主要用到的工具是fcrackzip.别的工具没去测试,f ...