用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图片预加载详解
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
随机推荐
- win10中打开SQL Server 2008 的SQL Server配置管理器方法
win10找不到SQL Server配置管理器 搜索 SQLServerManager10.msc,或者运行文件:“C:\Windows\SysWOW64\SQLServerManager10.msc ...
- B1002 写出这个数
读入一个正整数 n,计算其各位数字之和,用汉语拼音写出和的每一位数字. 输入格式: 每个测试输入包含 1 个测试用例,即给出自然数 n 的值.这里保证 n 小于 1. 输出格式: 在一行内输出 n 的 ...
- [BZOJ] 1563: [NOI2009]诗人小G
1D/1D的方程,代价函数是一个p次函数,典型的决策单调性 用单调队列(其实算单调栈)维护决策点,优化转移 复杂度\(O(nlogn)\) #include<iostream> #incl ...
- ubuntu : 无法安全地用该源进行更新,所以默认禁用该源。
sudo apt update报错: 无法安全地用该源进行更新,所以默认禁用该源. 1.检查是否是网络出了问题,修改DNS:114.114.114.114,8.8.8.8 断开网卡再重新连接,成功! ...
- NodeJS基础-Buffer
Buffer用于处理二进制数据流 实例类似于整数数组,大小固定 C++代码在V8堆外分配物理内存 // 创建一个长度为10,且用0填充的Buffer const buf1 = Buffer.alloc ...
- ipvsadm启动报错解决方法
Centos7 yum -y install ipvadm 安装后,启动ipvsadm却报错. Redirecting to /bin/systemctl start ipvsadm.service ...
- 我的Python分析成长之路7
类 一.编程范式: 1.函数式编程 def 2.面向过程编程 (Procedural Programming) 基本设计思路就是程序一开始是要着手解决一个大的问题,然后把一个大问题分解成很多个 ...
- python2和python3,字典和json
Python2的标准数据类型有: Numbers (数字) String (字符串) List (列表) Tuple (元组) Dictionary (字典) Python3的标准数据类型有: Num ...
- LeetCode(138) Copy List with Random Pointer
题目 A linked list is given such that each node contains an additional random pointer which could poin ...
- The 2018 ACM-ICPC Chinese Collegiate Programming Contest Maximum Element In A Stack
//利用二维数组模拟 #include <iostream> #include <cstdio> #include <cstring> #include <s ...