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 相关文章推荐
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
Nov 18 Javascript
js原型继承的两种方法对比介绍
Mar 30 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
Apr 06 Javascript
JavaScript 七大技巧(一)
Dec 13 Javascript
Jquery技巧(必须掌握)
Mar 16 Javascript
JS获取地址栏参数的两种方法(简单实用)
Jun 14 Javascript
详解Vue 多级组件透传新方法provide/inject
May 09 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
May 31 Javascript
vue component 中引入less文件报错 Module build failed
Apr 17 Javascript
JS多个表单数据提交下的serialize()应用实例分析
Aug 27 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
Feb 07 Javascript
vue-element-admin项目导入和导出的实现
May 21 Vue.js
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 XML备份Mysql数据库
2009/05/27 PHP
如何获知PHP程序占用多少内存(memory_get_usage)
2012/09/23 PHP
深入探讨:PHP使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
微信公众号开发之微信公共平台消息回复类实例
2014/11/14 PHP
php简单复制文件的方法
2016/05/09 PHP
PHP实现bitmap位图排序与求交集的方法
2016/07/28 PHP
PHP中十六进制颜色与RGB颜色值互转的方法
2019/03/18 PHP
javascript学习笔记(八) js内置对象
2012/06/19 Javascript
JS左右无缝滚动(一般方法+面向对象方法)
2012/08/17 Javascript
checkbox使用示例
2013/08/23 Javascript
jQuery中is()方法用法实例
2015/01/06 Javascript
jQuery对JSON数据进行排序输出的方法
2015/06/24 Javascript
JS表单数据验证的正则表达式(常用)
2017/02/18 Javascript
require.js中的define函数详解
2017/07/10 Javascript
详解Vue-cli代理解决跨域问题
2017/09/27 Javascript
原生js实现商品筛选功能
2019/10/28 Javascript
taro小程序添加骨架屏的实现代码
2019/11/15 Javascript
在 Vue 中编写 SVG 图标组件的方法
2020/02/24 Javascript
浅析JavaScript 函数柯里化
2020/09/08 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
2020/11/04 Javascript
python目录与文件名操作例子
2016/08/28 Python
解决python中使用PYQT时中文乱码问题
2019/06/17 Python
华为校园招聘上机笔试题 扑克牌大小(python)
2020/04/22 Python
AUC计算方法与Python实现代码
2020/02/28 Python
谈谈Python:为什么类中的私有属性可以在外部赋值并访问
2020/03/05 Python
Python如何爬取qq音乐歌词到本地
2020/06/01 Python
python 字符串格式化的示例
2020/09/21 Python
Python爬取微信小程序Charles实现过程图解
2020/09/29 Python
css 元素选择器的简单实例
2016/05/23 HTML / CSS
Eastbay官网:美国最大的运动鞋网络零售商
2016/07/27 全球购物
补充协议书范本
2014/04/23 职场文书
消防志愿者活动方案
2014/08/23 职场文书
北京故宫的导游词
2015/01/31 职场文书
CSS实现单选折叠菜单功能
2021/11/01 HTML / CSS
Nginx配置https的实现
2021/11/27 Servers
Apache SkyWalking 监控 MySQL Server 实战解析
2022/09/23 Servers