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 相关文章推荐
srcElement表格样式
Sep 03 Javascript
跟我学习javascript的执行上下文
Nov 18 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
Mar 08 Javascript
jQuery插件简单学习实例教程
Jul 01 Javascript
基于vuejs实现一个todolist项目
Apr 11 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
May 07 Javascript
ECMAscript 变量作用域总结概括
Aug 18 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
Aug 24 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
Aug 26 Javascript
vue.js移动数组位置,同时更新视图的方法
Mar 08 Javascript
webpack分离css单独打包的方法
Jun 12 Javascript
Vue 组件注册实例详解
Feb 23 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
Linux下ZendOptimizer的安装与配置方法
2007/04/12 PHP
CI框架中zip类应用示例
2014/06/17 PHP
PHP随机生成信用卡卡号的方法
2015/03/23 PHP
typecho插件编写教程(五):核心代码
2015/05/28 PHP
在CentOS系统上从零开始搭建WordPress博客的全流程记录
2016/04/21 PHP
PHP上传图片时判断上传文件是否为可用图片的方法
2016/10/20 PHP
php使用 readfile() 函数设置文件大小大小的方法
2017/08/11 PHP
win10下 php安装seaslog扩展的详细步骤
2020/12/04 PHP
javawscript 三级菜单的实现原理
2009/07/01 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
2014/06/07 Javascript
document.forms用法示例介绍
2014/06/26 Javascript
js实现鼠标经过时图片滚动停止的方法
2015/02/16 Javascript
input输入框鼠标焦点提示信息
2015/03/17 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
2015/09/15 Javascript
基于Vuejs和Element的注册插件的编写方法
2017/07/03 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
JS解析后台返回的JSON格式数据实例
2018/08/06 Javascript
微信小程序模板template简单用法示例
2018/12/04 Javascript
详解vue中移动端自适应方案
2019/05/05 Javascript
JavaScript设计模型Iterator实例解析
2020/01/22 Javascript
vue iview 隐藏Table组件里的某一列操作
2020/11/13 Javascript
Python实现建立SSH连接的方法
2015/06/03 Python
深入解析Python中的__builtins__内建对象
2016/06/21 Python
python实现各进制转换的总结大全
2017/06/18 Python
Scrapy框架CrawlSpiders的介绍以及使用详解
2017/11/29 Python
Python采集猫眼两万条数据 对《无名之辈》影评进行分析
2018/12/05 Python
对python中词典的values值的修改或新增KEY详解
2019/01/20 Python
pandas针对excel处理的实现
2021/01/15 Python
个人简历自我评价八例
2013/10/31 职场文书
小学综合实践活动总结
2014/07/07 职场文书
大专应届毕业生求职信
2014/07/15 职场文书
2015年煤矿安全工作总结
2015/05/23 职场文书
七年级生物教学反思
2016/02/20 职场文书
php png失真的原因及解决办法
2021/10/24 PHP
SQL SERVER中的流程控制语句
2022/05/25 SQL Server
Redis keys命令的具体使用
2022/06/05 Redis