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 OOP包机制,类创建的方法定义
Nov 02 Javascript
jquery multiSelect 多选下拉框
Jul 09 Javascript
利用javascript打开模态对话框(示例代码)
Jan 11 Javascript
js仿黑客帝国字母掉落效果代码分享
Nov 08 Javascript
Highcharts入门之基本属性
Aug 02 Javascript
jQuery ztree实现动态树形多选菜单
Aug 12 Javascript
Javascript Event(事件)的传播与冒泡
Jan 23 Javascript
Windows下Node.js安装及环境配置方法
Sep 18 Javascript
Vue filter介绍及其使用详解
Oct 21 Javascript
vue结合axios与后端进行ajax交互的方法
Jul 06 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
Sep 27 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
Jan 07 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
使用php检测用户当前使用的浏览器是否为IE浏览器
2013/12/03 PHP
js小技巧--自动隐藏红叉叉
2007/08/13 Javascript
JS 判断undefined的实现代码
2009/11/26 Javascript
基于jquery的滚动鼠标放大缩小图片效果
2011/10/27 Javascript
javascript日期转换 时间戳转日期格式
2011/11/05 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
2012/04/07 Javascript
jquery实现excel导出的方法
2013/04/04 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
2013/11/12 Javascript
利用原生JavaScript获取元素样式只是获取而已
2014/10/08 Javascript
JQuery异步加载PartialView的方法
2016/06/07 Javascript
Bootstrap 实现查询的完美方法
2016/10/26 Javascript
Bootstrap源码解读导航(6)
2016/12/23 Javascript
原生js实现回复评论功能
2017/01/18 Javascript
基于AngularJS的拖拽文件上传的实例代码
2017/07/15 Javascript
JavaScript事件委托原理与用法实例分析
2018/06/07 Javascript
jQuery 点击获取验证码按钮及倒计时功能
2018/09/20 jQuery
javascript导出csv文件(excel)的方法示例
2019/08/25 Javascript
[44:51]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第二场
2018/04/05 DOTA
python正则匹配抓取豆瓣电影链接和评论代码分享
2013/12/27 Python
Python中使用插入排序算法的简单分析与代码示例
2016/05/04 Python
详解使用 pyenv 管理多个版本 python 环境
2017/10/19 Python
Python3实现计算两个数组的交集算法示例
2019/04/03 Python
详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决
2019/04/17 Python
python程序 线程队列queue使用方法解析
2019/09/23 Python
python 爬虫百度地图的信息界面的实现方法
2019/10/27 Python
Python 剪绳子的多种思路实现(动态规划和贪心)
2020/02/24 Python
css3.0 图形构成实例练习二
2013/03/19 HTML / CSS
使用jquery实现HTML5响应式导航菜单教程
2014/04/02 HTML / CSS
一套比较完整的软件测试人员面试题
2012/05/13 面试题
应聘医学检验人员自荐信
2013/09/27 职场文书
实习期自我鉴定
2013/10/11 职场文书
秋天的雨教学反思
2014/04/27 职场文书
优秀三好学生事迹材料
2014/08/31 职场文书
2014年培训工作总结范文
2014/11/27 职场文书
幼儿园教师个人工作总结2015
2015/05/12 职场文书
成绩单家长意见
2015/06/03 职场文书