JavaScript怎么判断图片是否加载完成以便获取其尺寸


Posted in Javascript onMay 08, 2014

有时需要获取图片的尺寸,这需要在图片加载完成以后才可以,求方法?

一、load事件

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>img - load event</title> 
</head> 
<body> 
<img id="img1" src="http://pic1.xxx.com/wall/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.xxx.com/wall/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.xxx.com/wall/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 相关文章推荐
如何在标题栏显示框架内页面的标题
Feb 03 Javascript
Javascript跨域请求的4种解决方式
Mar 17 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
Aug 13 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
Sep 24 Javascript
浅析AngularJS中的生命周期和延迟处理
Jun 18 Javascript
javascript格式化日期时间方法汇总
Jun 19 Javascript
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
vue2.x+webpack快速搭建前端项目框架详解
Nov 30 Javascript
原生JS实现瀑布流插件
Feb 06 Javascript
vue定义全局变量和全局方法的方法示例
Aug 01 Javascript
element-ui 表格数据时间格式化的方法
Aug 24 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
Mar 14 Javascript
js动态删除div元素基本思路及实现代码
May 08 #Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
May 08 #Javascript
jquery查找tr td 示例模拟
May 08 #Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
May 08 #Javascript
JavaScript二维数组实现的省市联动菜单
May 08 #Javascript
javascript中setTimeout的问题解决方法
May 08 #Javascript
在JavaScript中使用timer示例
May 08 #Javascript
You might like
解析yahoo邮件用phpmailer发送的实例
2013/06/24 PHP
php构造函数实例讲解
2013/11/13 PHP
Laravel 5 框架入门(四)完结篇
2015/04/09 PHP
基于PHP实现短信验证码接口(容联运通讯)
2016/09/06 PHP
php 可变函数使用小结
2018/06/12 PHP
Laravel重定向,a链接跳转,控制器跳转示例
2019/10/22 PHP
PHP实现抽奖功能实例代码
2020/06/30 PHP
在IE下:float属性会影响offsetTop的取值
2006/12/22 Javascript
javascript面向对象之Javascript 继承
2010/05/04 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
2012/12/21 Javascript
Javascript检查图片大小不要让大图片撑破页面
2014/11/04 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
2015/11/30 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
2017/03/09 Javascript
微信小程序获取微信运动步数的实例代码
2017/07/20 Javascript
实现单层json按照key字母顺序排序的示例
2017/12/06 Javascript
Vuex实现数据增加和删除功能
2019/11/11 Javascript
在Vue中使用HOC模式的实现
2020/08/23 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
2020/11/11 Javascript
[01:03:41]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第三场 2月2日
2021/03/11 DOTA
python中cPickle类使用方法详解
2018/08/27 Python
Python安装Flask环境及简单应用示例
2019/05/03 Python
django中SMTP发送邮件配置详解
2019/07/19 Python
Python函数中的可变长参数详解
2019/09/12 Python
python实现录制全屏和选择区域录屏功能
2021/02/05 Python
CSS3 实现侧边栏展开收起动画
2014/12/22 HTML / CSS
德国孕妇装和婴童服装网上商店:bellybutton
2018/04/12 全球购物
吉力贝官方网站:Jelly Belly
2019/03/11 全球购物
莫斯科高科技在线商店:KremlinStore
2019/03/13 全球购物
教师节促销活动方案
2014/02/14 职场文书
幼儿园母亲节活动方案
2014/03/10 职场文书
机关中层领导干部群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
辞职信格式模板
2015/02/27 职场文书
政协委员个人总结
2015/03/03 职场文书
三严三实学习心得体会(精选N篇)
2016/01/05 职场文书
Mysql实现简易版搜索引擎的示例代码
2021/08/30 MySQL