JS判断单、多张图片加载完成
转:http://www.daqianduan.com/6419.html
试想,如果模板中有图片,此时如何判断图片是否加载完成?
在此之前来了解一下jquery的ready与window.onload的区别,ready只是dom结构加载完毕,便视为加载完成。(此时图片没有加载完毕),onload是指dom的生成和资源完全加载(比如flash、图片)出来后才执行。接下来回到正题,先从单张图片说起。
(1)、单张图片(图片在文档中)
// HTML
<img id='xiu' src="http://www.daqianduan.com/wp-content/uploads/2014/11/hs-xiu.jpg"> //js
$(document).ready(function(){ //jquery
$('#xiu').load(function(){
// 加载完成
}); //原生 onload
var xiu = document.getElementById('xiu')
xiu.onload = xiu.onreadystatechange = function(){
if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){
// 加载完成
}
}; })
注:
1、IE8及以下版本不支持onload事件,但支持onreadystatechange事件;
2、readyState是onreadystatechange事件的一个状态,值为loaded或complete的时候,表示已经加载完毕。
3、以下内容省略兼容
(2)、单张图片(图片动态生成)
//js
var xiu = new Image()
xiu.src = 'http://www.daqianduan.com/wp-content/uploads/2014/11/hs-xiu.jpg'
xiu.onload = function(){
// 加载完成
}
(3)、单张图片(结合ES6 Promise)
//js
new Promise((resolve, reject)=>{
let xiu = new Image()
xiu.src = 'http://www.daqianduan.com/wp-content/uploads/2014/11/hs-xiu.jpg'
xiu.onload = function(){
// 加载完成
resolve(xiu)
}
}).then((xiu)=>{
//code
})
(4)、多张图片
var img = [],
flag = 0,
mulitImg = [
'http://www.daqianduan.com/wp-content/uploads/2017/03/IMG_0119.jpg',
'http://www.daqianduan.com/wp-content/uploads/2017/01/1.jpg',
'http://www.daqianduan.com/wp-content/uploads/2015/11/jquery.jpg',
'http://www.daqianduan.com/wp-content/uploads/2015/10/maid.jpg'
];
var imgTotal = mulitImg.length;
for(var i = 0 ; i < imgTotal ; i++){
img[i] = new Image()
img[i].src = mulitImg[i]
img[i].onload = function(){
//第i张图片加载完成
flag++
if( flag == imgTotal ){
//全部加载完成
}
}
}
(5)、多张图片(结合ES6 Promise.all())
let mulitImg = [
'http://www.daqianduan.com/wp-content/uploads/2017/03/IMG_0119.jpg',
'http://www.daqianduan.com/wp-content/uploads/2017/01/1.jpg',
'http://www.daqianduan.com/wp-content/uploads/2015/11/jquery.jpg',
'http://www.daqianduan.com/wp-content/uploads/2015/10/maid.jpg'
];
let promiseAll = [], img = [], imgTotal = mulitImg.length;
for(let i = 0 ; i < imgTotal ; i++){
promiseAll[i] = new Promise((resolve, reject)=>{
img[i] = new Image()
img[i].src = mulitImg[i]
img[i].onload = function(){
//第i张加载完成
resolve(img[i])
}
})
}
Promise.all(promiseAll).then((img)=>{
//全部加载完成
})
JS判断单、多张图片加载完成的更多相关文章
- 为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件
为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件.样式文件命名格式如:forms[_屏幕宽度].css,样式文件中只需重新定义文本框和下拉框的宽度即可. 在包含的头文件 ...
- JS 判断滚动底部并加载更多效果。。。。。。。。。
JS 判断滚动底部并加载更多效果......... <html lang="zh-cn"> <head> <meta http-equiv=" ...
- JS判断访问设备(userAgent)加载不同页面 JS判断客户端操作系统类型(platform)
//平台.设备和操作系统 var system ={ win : false, mac : false, xll : false }; //检测平台 var p = navigator.platfor ...
- js判断flash文件是否加载完毕
轮询判断加载进度 img的加载完成有onload方法,一直不知道该怎么判断swf文件是否加载完毕了? 在应用中使用了轮询判断加载进度值PercentLoaded是否达到100,经测试,可以达到效果. ...
- js 判断是什么浏览器加载页面
一.Navigator 属性: 1)appcodeName 返回浏览器代码名 2)appminorVersion 返回浏览器次级版本 3)appname 返回浏览器名称 4)browserLan ...
- js 多张图片加载 环形进度条
css 部分使用 svg 绘制环形 svg{width:100px; height: 100px; margin:15% auto 25%; box-sizing:border-box; displa ...
- 如何使用echo.js实现图片的懒加载(整理)
如何使用echo.js实现图片的懒加载(整理) 一.总结 一句话总结:a.在img标签中添加data-echo属性加载真实图片:<img class="loading" sr ...
- 常用js,css文件统一加载方法,并在加载之后调用回调函数
原创内容,转载请注明出处! 为了方便资源管理和提升工作效率,常用的js和css文件的加载应该放在一个统一文件里面完成,也方便后续的资源维护.所以我用js写了以下方法,存放在“sourceControl ...
- js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...
随机推荐
- loj #2325. 「清华集训 2017」小Y和恐怖的奴隶主
#2325. 「清华集训 2017」小Y和恐怖的奴隶主 内存限制:256 MiB时间限制:2000 ms标准输入输出 题目类型:传统评测方式:文本比较 题目描述 "A fight? Co ...
- 2017-10-17 NOIP模拟赛2
a [问题描述]你是能看到第一题的 friends 呢.——hja何大爷对字符串十分有研究,于是天天出字符串题虐杀 zhx.何大爷今天为字符串定义了新的权值计算方法.一个字符串由小写字母组成,字符串的 ...
- NoSuchMethodError idea解决jar包冲突
报NoSuchMethodError(使用spring boot框架idea)一般是jar包冲突 Exception in thread"main" java.lang.NoSuc ...
- 树的直径 【bzoj3363】[Usaco2004 Feb]Cow Marathon 奶牛马拉松
3363: [Usaco2004 Feb]Cow Marathon 奶牛马拉松 Description 最近美国过度肥胖非常普遍,农夫约翰为了让他的奶牛多做运动,举办了奶牛马拉松.马拉 松路线要尽 ...
- vue-cli 使用sass(scss)
安装依赖: npm install sass-loader node-sass vue-style-loader --save-dev
- [USACO07MAR]黄金阵容均衡Gold Balanced L… map
题目描述 Farmer John's N cows (1 ≤ N ≤ 100,000) share many similarities. In fact, FJ has been able to na ...
- "微信戴圣诞帽"的一个简易实现程序
准备安装 由于是利用别人写的人脸识别的一个库,所以需要在import之前安装好相应的环境.如果直接安装face_recognition库的时候就会直接提示缺少的相应的dlib库.而dlib库本身需要c ...
- Python 起步 环境配置
1:https://www.python.org/ 首先进入这个网址,选择自己喜欢的版本 2:嘛,我以前装的是2.7,把下载好的安装一下就行 3:我的电脑Python的安装路径C:\Progra ...
- poj(3080)
题目链接:http://poj.org/problem?id=3080 学习博客:https://www.cnblogs.com/acjiumeng/p/6818213.html Blue Jeans ...
- Storm概念学习系列之storm的特性
不多说,直接上干货! storm的特性 Storm 是一个开源的分布式实时计算系统,可以简单.可靠地处理大量的数据流. Storm支持水平扩展,具有高容错性,保证每个消息都会得到处理,而且处理速度很快 ...