用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图片预加载详解
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
随机推荐
- QQ 发送邮件
之前也发布过一篇QQ发邮件的,后来那种方法在阿里云服务器中报错了,查了好久才发现,是阿里云的服务器把 25 端口 给封杀了.现在重新做了个功能. public static string UserNa ...
- Check for Palindromes-freecodecamp算法题目
Check for Palindromes(检查回文字符串) 要求 给定的字符串是回文,返回true,反之,返回false.(如果一个字符串忽略标点符号.大小写和空格,正着读和反着读一模一样,那么这个 ...
- C++系统学习之九:顺序容器
元素在顺序容器中的顺序与其加入容器时的位置相对应.关联容器中元素的位置由元素相关联的关键字值决定.所有容器类都共享公共的接口,不同容器按不同方式对其进行扩展. 一个容器就是一些特定类型对象的集合.顺序 ...
- java解析多层嵌套json字符串
java分别解析下面两个json字符串 package jansonDemo; import com.alibaba.fastjson.JSON; import com.alibaba.fastjso ...
- Oracle 数据库常用SQL语句(2)查询语句
一.SQL基础查询 1.select语句 格式:select 字段 from 表名; 2.where 用于限制查询的结果. 3.查询条件 > < >= <= = != 4.与 ...
- Thinkphp5 的常用连式查询
目录 取出表中改字符串前两位等于01的数据 按主键查询 不按主键查 JOIN方法 的左右连接 not in 方法 like 查询 where 按条件筛选查询 取出表中改字符串前两位等于01的数据 $p ...
- Form和ModelForm组件
Form介绍 我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时我们在好多场景下都需要对用户的输入做校验,比如校验用户是否 ...
- 18/07/2017 R matrix
矩阵:二维数组,元素拥有相同模式(数值型,字符型或者逻辑型) mymatrix <- matrix (vector, nrow_num_of_rows, ncol_num_of_columns, ...
- Python爬虫,爬取实验楼全部课程
目的: 使用requests库以及xpath解析进行实验楼所有课程,存入MySQL数据 库中. 准备工作: 首先安装,requests库,lxml库,以及peewee库.在命令行模式,使用以下命令. ...
- Applied Nonparametric Statistics-lec3
Ref: https://onlinecourses.science.psu.edu/stat464/print/book/export/html/4 使用非参数方法的优势: 1. 对总体分布做的假设 ...