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控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...
随机推荐
- 编写自定义GenericServlet
用途: 编写自定义GenericServlet类后,子类只需继承这个类,就可以直接使用ServletConfig的config对象和ServletConfig接口的方法,而不需要init()方法获取c ...
- 消息队列RabbitMQ、缓存数据库Redis
1.RabbitMQ消息队列 1.1 RabbitMQ简介 AMQP,即Advanced Message Queuing Protocol,高级消息队列协议,是应用层协议的一个开放标准,为面向消息的中 ...
- vue使用webpack压缩后体积过大要怎么优化
vue使用webPack压缩后存储过大,怎么优化 在生产环境去除developtool选项 在webpack.config.js中设置的developtool选项,仅适用于开发环境,这样会造成打包成的 ...
- LeetCode 671. Second Minimum Node In a Binary Tree二叉树中第二小的节点 (C++)
题目: Given a non-empty special binary tree consisting of nodes with the non-negative value, where eac ...
- 洛谷P2486 [SDOI2011]染色
题目描述 输入输出格式 输入格式: 输出格式: 对于每个询问操作,输出一行答案. 输入输出样例 输入样例#1: 6 5 2 2 1 2 1 1 1 2 1 3 2 4 2 5 2 6 Q 3 5 C ...
- web安全深度剖析pdf
Web安全深度剖析.pdf_免费高速下载|百度网盘-分享无限制 链接:https://pan.baidu.com/s/1kVwP7SF
- Ext3.1的一些使用讨论
这里简单记录一下曾经的10个月使用Ext的工作模式. 前公司用的是 Ext 3.1,在2018/2019的今天,可以说是比较久远的技术了.处于大前端发展时代的我们,对其的诟病应该不少. 不过其中面向对 ...
- Scala_Load csv data to hive via spark2.1
code: package com.liupu import org.apache.spark.{ SparkContext, SparkConf } import org.apache.spark. ...
- (转)CentOS 6下配置软RAID图文详解
CentOS 6下配置软RAID图文详解 原文:http://blog.51cto.com/hujiangtao/1929620 一.RAID 简介 RAID 是英文Redundant Array o ...
- cocos
cocos compile -p android --android-studio --app-abi=armeabi-v7a ./adb kill-server&& ./adb se ...