用promise做图片的预加载
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做图片的预加载的更多相关文章
- Promise实现多图预加载
Promise正如它的中文意思“承诺”一样,保存着未来会发生事件(一般为异步操作).Promise避免了“回调地狱”,写法更加接近同步操作.说到同步,我更加喜欢async.await,它们书写更贴近同 ...
- JS 实现图片的预加载(转载)
图片预加载是web开发中一种应用相当广泛的技术,比如我们在做图片翻转显示等特效的时候,为了让图片在转换的时候不出现等待,我们最好是先让图片下载到本地,然后在继续执行后续的操作. 下面的函数实现了一个我 ...
- [转]Javascript实现图片的预加载详解
下面的函数实现了一个我们想要的最基本的图片预加载效果 function preloadimages(arr){ var newimages=[] var arr=(typeof arr!=" ...
- Javascript实现图片的预加载的完整实现
图片预加载是web开发中一种应用相当广泛的技术,比如我们在做图片翻转显示等特效的时候,为了让图片在转换的时候不出现等待,我们最好是先让图片下载到本地,然后在继续执行后续的操作.今天我们将来实现一个完整 ...
- ViewPager做图片浏览器,加载大量图片OOM的问题修正
/** * @author CHQ * @version 1.0 * @date 创建时间: 2016/7/26 17:18 * @parameter * @return * 图片查看器 * //可以 ...
- Jquery实现图片的预加载与延时加载
有很多项目经常会需要判断图片加载完成后执行相应的操作,或者需要图片延迟加载,网上虽然已经有很不错的插件,但要为这些效果还得单独加载一个插件的话总感觉有点不舒服,干脆自己写了个方法: 1 2 3 4 5 ...
- flex 实现图片播放 方案一 图片全部预加载放内存
这种方案,对于web的应用有局限性,在图片量比较多,比较大的时候,就会爆浏览器异常.一般建议轻量级的采用这种方案. <?xml version="1.0" encoding= ...
- ajax点击加载更多数据图片(预加载)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Javascript图片预加载详解
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
随机推荐
- GIMP如何制作一只大佬猫头像
新建文件File -> 设置宽度为24px,高度5px:高级选项中将背景图片设置为无色 使用铅笔,前景色设为黑色,画出眼镜的模样,画出反光效果:将前景色设为灰色 放大图片,右击空白区域-> ...
- CSS清除浮动8大方法
CSS清除浮动是每一位web前端工程师都要掌握的技术,也是让每一位刚入门的前端工程师感到头疼的问题, 下面就来讲一下CSS清除浮动的原理和各种解决方法,大家可以根据实际情况选择最佳的解决方案. 在用D ...
- 面试题--如何防止sql注入,使用PreparedStatement的预编译,传入的内容就不会和原来的语句发生任何匹配的关系,达到防止注入的方法
PreparedStatement的用法 jdbc(java database connectivity,java数据库连接)的api中的主要的四个类之一的java.sql.statement要求开发 ...
- POJ 1791 Parallelogram Counting(求平行四边形数量)
Description There are n distinct points in the plane, given by their integer coordinates. Find the n ...
- Counting Cliques HDU - 5952 单向边dfs
题目:题目链接 思路:这道题vj上Time limit:4000 ms,HDU上Time Limit: 8000/4000 MS (Java/Others),且不考虑oj测评机比现场赛慢很多,但10月 ...
- 素数筛选:HDU2710-Max Factor
Max Factor Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Problem ...
- Linux学习-逻辑滚动条管理员 (Logical Volume Manager)
LVM 可以整合多个实体 partition 在一起, 让这些 partitions 看起来就像是一个磁盘一样!而且,还可以在未来新增或移除其他的实 体 partition 到这个 LVM 管理的磁盘 ...
- selenium2 页面对象模型Page Object
开发Selenium WebDriver测试时,可以使用页面对象模型,这样可使得测试脚本有更高的可维护性,减少了重复的代码,把页面抽象出来.同时页面对象模型也提供了一个注释,帮助缓存远程,避免出现元素 ...
- JAVA-基础(三)
Character 类型字符(Character)是围绕字符型(char)的一个简单的包装器.字符(Character)的构造函数如下:Character(char ch)这里ch指定了被创建的字符( ...
- java事物
[引用:http://www.cnblogs.com/kristain/articles/2038397.html] 一.什么是事务 事务是访问数据库的一个操作序列,数据库应用系统通过事务集来完成对数 ...