JavaScript判断图片是否已经加载完毕的方法汇总


Posted in Javascript onFebruary 05, 2016

在网上有很多关于判断图片是否已经加载完毕的文章,但是有的浏览器并不适合,下面小编给大家分享一些有关JavaScript判断图片是否已经加载完毕方法汇总,具体内容如下所示:

一.onload事件

通过监听图片的onload事件,可以判断图片是否已经加载完成,兼容所有的浏览器(w3c推荐方法),代码示例如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg" alt="">
<script>
// 方法一:图片已经下载完
document.getElementById('img1').onload = function(e){
e.stopPropagation();
alert(1);
}
</script>
</body>
</html>

二.判断img对象(DOM)的complete属性

当img加载完成之后,complete对象属性将变为true,代码示例如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg" alt="">
<script>
// 方法二:img的complate属性
var timer = setInterval(function(){
if (document.getElementById('img1').complete){
clearInterval(timer);
alert(1);
console.log(document.getElementById('img1').complete)
}
}, 10);
</script>
</body>
</html>

亲测该方法同样可兼容所有浏览器

三.onreadystatechange事件

在ie下,img对象与xhr对象一样具有onreadystatechange事件,可以通郭建廷该事件判断图片是否加载完成,代码示例如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg" alt="">
<script>
document.getElementById('img1').onreadystatechange = function() {
if(document.getElementById('img1').readyState=="complete"||document.getElementById('img1').readyState=="loaded"){
alert(1);
}
}
</script>
</body>
</html>

该方法仅在ie下可用

Javascript 相关文章推荐
jQuery 加上最后自己的验证
Nov 04 Javascript
jWiard 基于JQuery的强大的向导控件介绍
Oct 28 Javascript
广泛收集的jQuery拖放插件集合
Apr 09 Javascript
原生Javascript封装的一个AJAX函数分享
Oct 11 Javascript
20个实用的JavaScript技巧分享
Nov 28 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
Aug 08 Javascript
JS实现的样式切换功能tableCSS实例
Dec 30 Javascript
Vue.use源码分析
Apr 22 Javascript
js禁止浏览器页面后退功能的实例(推荐)
Sep 01 Javascript
vue项目环境变量配置的实现方法
Oct 12 Javascript
微信小程序实现类似微信点击语音播放效果
Mar 30 Javascript
JS中循环遍历数组的四种方式总结
Jan 23 Javascript
jquery实现的判断倒计时是否结束代码
Feb 05 #Javascript
AngularJs中route的使用方法和配置
Feb 04 #Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
Feb 04 #Javascript
分享我对JS插件开发的一些感想和心得
Feb 04 #Javascript
关于JavaScript作用域你想知道的一切
Feb 04 #Javascript
Node.js重新刷新session过期时间的方法
Feb 04 #Javascript
jquery操作select元素和option的实例代码
Feb 03 #Javascript
You might like
php多功能图片处理类分享(php图片缩放类)
2014/03/14 PHP
destoon实现公司新闻详细页添加评论功能的方法
2014/07/15 PHP
php正则匹配文章中的远程图片地址并下载图片至本地
2015/09/29 PHP
PHP序列化操作方法分析
2016/09/28 PHP
PHP echo()函数讲解
2019/02/15 PHP
JQuery实现自定义对话框的代码
2008/06/15 Javascript
jquery tools之tooltip
2009/07/25 Javascript
javascript 按回车键相应按钮提交事件
2009/11/02 Javascript
jQuery取id有.的值的方法
2014/05/21 Javascript
继续学习javascript闭包
2015/12/03 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
2016/11/30 Javascript
vue+swiper实现组件化开发的实例代码
2017/10/26 Javascript
JS实现在文本指定位置插入内容的简单示例
2017/12/22 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
vue2.x 对象劫持的原理实现
2020/04/19 Javascript
Postman动态获取返回值过程详解
2020/06/30 Javascript
python字典的常用操作方法小结
2016/05/16 Python
对Python中type打开文件的方式介绍
2018/04/28 Python
django.db.utils.ProgrammingError: (1146, u“Table‘’ doesn’t exist”)问题的解决
2018/07/13 Python
启动Atom并运行python文件的步骤
2018/11/09 Python
Python使用指定端口进行http请求的例子
2019/07/25 Python
基于Python获取照片的GPS位置信息
2020/01/20 Python
解决Django no such table: django_session的问题
2020/04/07 Python
Python3与fastdfs分布式文件系统如何实现交互
2020/06/23 Python
python matplotlib库的基本使用
2020/09/23 Python
CSS3 完美实现圆角效果
2009/07/13 HTML / CSS
美国马匹用品和骑马配件购物网站:Horse.com
2018/01/08 全球购物
zooplus意大利:在线宠物商店
2019/08/07 全球购物
英国百年闻名的优质健康产品连锁店:Holland & Barrett
2019/12/19 全球购物
开工庆典邀请函范文
2014/01/16 职场文书
整改落实情况汇报材料
2014/10/29 职场文书
自荐信模板大全
2015/03/27 职场文书
民事答辩状范本
2015/05/21 职场文书
《秋天的图画》教学反思
2016/02/19 职场文书
Pytorch 统计模型参数量的操作 param.numel()
2021/05/13 Python
react 路由Link配置详解
2021/11/11 Javascript