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用图作提交按钮或超连接
Mar 26 Javascript
javaScript 动态访问JSon元素示例代码
Aug 30 Javascript
jquery中交替点击事件toggle方法的使用示例
Dec 08 Javascript
js正则表达exec与match的区别说明
Jan 29 Javascript
js replace替换所有匹配的字符串
Feb 13 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
Sep 01 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
Dec 24 Javascript
关于foreach循环中遇到的问题小结
May 08 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
Dec 09 Javascript
记录一次开发微信网页分享的步骤
May 07 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
Feb 15 Javascript
Vue实现图书管理案例
Jan 20 Vue.js
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
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-3 代码组织和重用2
2011/07/03 PHP
SESSION信息保存在哪个文件目录下以及能够用来保存什么类型的数据
2012/06/17 PHP
php实现快速排序法函数代码
2012/08/27 PHP
PHP可逆加密/解密函数分享
2012/09/25 PHP
PHP实现将HTML5中Canvas图像保存到服务器的方法
2014/11/28 PHP
js 编写规范
2010/03/03 Javascript
javascript自适应宽度的瀑布流实现思路
2013/02/20 Javascript
js+div实现图片滚动效果代码
2014/02/10 Javascript
javascipt:filter过滤介绍及使用
2014/09/10 Javascript
jqueryMobile使用示例分享
2016/01/12 Javascript
jQuery中的基本选择器用法学习教程
2016/04/14 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
2016/07/07 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
2016/09/23 Javascript
基于Vue实现timepicker
2017/04/25 Javascript
基于JQuery的Ajax方法使用详解
2017/08/16 jQuery
React Native模块之Permissions权限申请的实例相机
2017/09/28 Javascript
layui使用数据表格实现购物车功能
2019/07/26 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
2019/11/19 Javascript
用python记录运行pid,并在需要时kill掉它们的实例
2017/01/16 Python
CentOS7.3编译安装Python3.6.2的方法
2018/01/22 Python
Python命令行解析模块详解
2018/02/01 Python
Python简单生成随机数的方法示例
2018/03/31 Python
python自动结束mysql慢查询会话的实例代码
2019/10/27 Python
python字符串反转的四种方法详解
2019/12/02 Python
python opencv根据颜色进行目标检测的方法示例
2020/01/15 Python
Python3中configparser模块读写ini文件并解析配置的用法详解
2020/02/18 Python
vue常用指令代码实例总结
2020/03/16 Python
python开发实例之python使用Websocket库开发简单聊天工具实例详解(python+Websocket+JS)
2020/03/18 Python
去除python中的字符串空格的简单方法
2020/12/22 Python
实例教程 一款纯css3实现的数字统计游戏
2014/11/10 HTML / CSS
出国留学自荐信
2013/10/25 职场文书
管理学专业个人求职信范文
2013/12/13 职场文书
面试通知邮件
2015/04/20 职场文书
新闻稿格式范文
2015/07/18 职场文书
浅析Python实现DFA算法
2021/06/26 Python
Python Matplotlib绘制等高线图与渐变色扇形图
2022/04/14 Python