使用JavaScript判断图片是否加载完成的三种实现方式


Posted in Javascript onMay 04, 2014

有时需要获取图片的尺寸,这需要在图片加载完成以后才可以。有三种方式实现,下面一一介绍。

一、load事件

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>img - load event</title> 
</head> 
<body> 
<img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg"> 
<p id="p1">loading...</p> 
<script type="text/javascript"> 
img1.onload = function() { 
p1.innerHTML = 'loaded' 
} 
</script> 
</body> 
</html>

测试,所有浏览器都显示出了“loaded”,说明所有浏览器都支持img的load事件。

二、readystatechange事件

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>img - readystatechange event</title> 
</head> 
<body> 
<img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg"> 
<p id="p1">loading...</p> 
<script type="text/javascript"> 
img1.onreadystatechange = function() { 
if(img1.readyState=="complete"||img1.readyState=="loaded"){ 
p1.innerHTML = 'readystatechange:loaded' 
} 
} 
</script> 
</body> 
</html>

readyState为complete和loaded则表明图片已经加载完毕。测试IE6-IE10支持该事件,其它浏览器不支持。

三、img的complete属性

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>img - complete attribute</title> 
</head> 
<body> 
<img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg"> 
<p id="p1">loading...</p> 
<script type="text/javascript"> 
function imgLoad(img, callback) { 
var timer = setInterval(function() { 
if (img.complete) { 
callback(img) 
clearInterval(timer) 
} 
}, 50) 
} 
imgLoad(img1, function() { 
p1.innerHTML('加载完毕') 
}) 
</script> 
</body> 
</html>

轮询不断监测img的complete属性,如果为true则表明图片已经加载完毕,停止轮询。该属性所有浏览器都支持。
使用JavaScript判断图片是否加载完成的三种实现方式 
Javascript 相关文章推荐
“不能执行已释放的Script代码”错误的原因及解决办法
Sep 09 Javascript
父子窗体间传递JSON格式的数据的代码
Dec 25 Javascript
range 标准化之获取
Aug 28 Javascript
基于jquery的$.ajax async使用
Oct 19 Javascript
浅析AngularJS中的生命周期和延迟处理
Jun 18 Javascript
javascript如何写热点图
Dec 08 Javascript
完美实现bootstrap分页查询
Dec 09 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
Aug 23 Javascript
vue初尝试--项目结构(推荐)
Jan 30 Javascript
vue.js前后端数据交互之提交数据操作详解
Apr 24 Javascript
vue自定义指令和动态路由实现权限控制
Aug 28 Javascript
微信小程序实现加入购物车滑动轨迹
Nov 18 Javascript
使用JavaScript获取电池状态的方法
May 03 #Javascript
JavaScript打印网页指定区域的例子
May 03 #Javascript
js检测输入内容全为空格的方法
May 03 #Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
May 03 #Javascript
离开当前页面前使用js判断条件提示是否要离开页面
May 02 #Javascript
js日期联动示例
May 02 #Javascript
jQuery实现的多选框多级联动插件
May 02 #Javascript
You might like
社区(php&amp;&amp;mysql)二
2006/10/09 PHP
简单的过滤字符串中的HTML标记
2006/12/25 PHP
phpwind中的数据库操作类
2007/01/02 PHP
PHP 时间转换Unix时间戳代码
2010/01/22 PHP
windows环境下php配置memcache的具体操作步骤
2013/06/09 PHP
php使用cookie实现记住用户名和密码实现代码
2015/04/27 PHP
用 JavaScript 迁移目录
2006/12/18 Javascript
JQuery动态创建DOM、表单元素的实现代码
2011/08/09 Javascript
THREE.JS入门教程(5)你应当知道的十件事
2013/01/24 Javascript
javascript检查表单数据是否改变的方法
2013/07/30 Javascript
JavaScript实现打字效果的方法
2015/07/10 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
2015/12/07 Javascript
详解JavaScript基本类型和引用类型
2015/12/09 Javascript
jQuery实现网页顶部固定导航效果代码
2015/12/24 Javascript
AnjularJS中$scope和$rootScope的区别小结
2016/09/18 Javascript
js仿手机页面文件下拉刷新效果
2016/10/14 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
2017/02/08 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
2018/09/21 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
2019/09/25 Javascript
[06:24]DOTA2亚洲邀请赛小组赛第三日 TOP10精彩集锦
2015/02/01 DOTA
python监控网站运行异常并发送邮件的方法
2015/03/13 Python
Python爬虫实现网页信息抓取功能示例【URL与正则模块】
2017/05/18 Python
python+POP3实现批量下载邮件附件
2018/06/19 Python
Python使用Turtle模块绘制国旗的方法示例
2021/02/28 Python
微信小程序之html5 canvas绘图并保存到系统相册
2019/06/20 HTML / CSS
Furla官网:意大利著名的皮革品牌
2019/08/06 全球购物
玩具公司的创业计划书
2013/12/31 职场文书
初中生物教学反思
2014/01/10 职场文书
护士个人自我鉴定
2014/03/24 职场文书
遗嘱公证书标准样本
2014/04/08 职场文书
高中英语演讲稿范文
2014/04/24 职场文书
请病假条范文
2015/08/17 职场文书
历史名人教你十五个读书方法,赶快Get起来!
2019/07/18 职场文书
SQL实现LeetCode(196.删除重复邮箱)
2021/08/07 MySQL
MySQL8.0的WITH查询详情
2021/08/30 MySQL
《巫师》是美食游戏?CDPR10月将推出《巫师》官方食谱
2022/04/03 其他游戏