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 相关文章推荐
js自动下载文件到本地的实现代码
Apr 28 Javascript
JQuery实现表格中相同单元格合并示例代码
Jun 26 Javascript
JavaScript—window对象使用示例
Dec 09 Javascript
prototype框架中美元符号$用法分析
Jan 22 Javascript
javascript代码调试之console.log 用法图文详解
Sep 30 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
Dec 29 Javascript
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
Vue侧滑菜单组件——DrawerLayout
Dec 18 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
Nov 11 Javascript
Vue实现商品飞入购物车效果(电商项目)
Nov 26 Javascript
VueQuillEditor富文本上传图片(非base64)
Jun 03 Javascript
vue select 获取value和lable操作
Aug 28 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
ie与session丢失(新窗口cookie丢失)实测及解决方案
2013/07/15 PHP
php中的路径问题与set_include_path使用介绍
2014/02/11 PHP
win7计划任务定时执行PHP脚本设置图解
2014/05/09 PHP
php导入模块文件分享
2015/03/17 PHP
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
Thinkphp结合AJAX长轮询实现PC与APP推送详解
2017/07/31 PHP
jquery 图片 上一张 下一张 链接效果(续篇)
2010/04/20 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
2014/04/30 Javascript
基于replaceChild制作简单的吞噬特效
2015/09/21 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
2015/10/28 Javascript
js删除局部变量的实现方法
2016/06/25 Javascript
原生js实现自由拖拽弹窗代码demo
2016/06/29 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
关于不同页面之间实现参数传递的几种方式讨论
2017/02/13 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
2017/09/21 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
2019/05/30 Javascript
axios实现简单文件上传功能
2019/09/25 Javascript
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
用python记录运行pid,并在需要时kill掉它们的实例
2017/01/16 Python
基于循环神经网络(RNN)的古诗生成器
2018/03/26 Python
python3实现爬取淘宝美食代码分享
2018/09/23 Python
python ipset管理 增删白名单的方法
2019/01/14 Python
解决python字典对值(值为列表)赋值出现重复的问题
2019/01/20 Python
Python实现二叉树的最小深度的两种方法
2019/09/30 Python
AmazeUI 面板的实现示例
2020/08/17 HTML / CSS
新西兰最大的品牌运动鞋购物网站:Platypus NZ
2017/10/27 全球购物
俄罗斯披萨、寿司和面食送货到家服务:2 Берега
2019/12/15 全球购物
Maxpeedingrods美国:高性能汽车零件
2020/02/14 全球购物
军训教官感言
2014/03/02 职场文书
国旗下讲话演讲稿
2014/05/08 职场文书
十佳党员事迹材料
2014/08/28 职场文书
预备党员2014年第四季度思想汇报范文
2014/10/25 职场文书
英语投诉信范文
2015/07/03 职场文书
Mysql 用户权限管理实现
2021/05/25 MySQL
新的CSS 伪类函数 :is() 和 :where()示例详解
2022/08/05 HTML / CSS
LyScript实现绕过反调试保护的示例详解
2022/08/14 Python