JavaScript怎么判断图片是否加载完成以便获取其尺寸
更新时间：2014年05月08日 09:57:41 作者：
需要获取图片的尺寸，就需要在图片加载完成以后才可以，下面有个不错的方法，大家不妨参考下
有时需要获取图片的尺寸，这需要在图片加载完成以后才可以，求方法？
一、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则表明图片已经加载完毕，停止轮询。该属性所有浏览器都支持。
一、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则表明图片已经加载完毕，停止轮询。该属性所有浏览器都支持。
相关文章
这篇文章主要介绍了JS学习笔记之闭包,结合具体案例形式分析了javascript实现与使用闭包的相关操作技巧,需要的朋友可以参考下2019-05-05
这篇文章主要介绍了功能完善的小程序日历组件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
这篇文章再次为大家详细介绍了JavaScript简单实现弹出拖拽窗口的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-06-06
本篇文章主要介绍js Function函数的使用方法，应该对初学Js的朋友们会有所帮助,下面就随小编一起来看下吧2016-11-11
IE下Ajax缓存问题的快速解决方法(get方式)。网上搜了很多解决方案，一大把，下面是我认为比较全面的解决方案。主要分为客户端解决和服务端解决2014-01-01
JavaScript中的Array对象是一个动态的数组，也是一个Stack,还是一个Dictionary2011-01-01
这篇文章主要介绍了js实时获取并显示当前时间的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍了微信小程序与webview交互实现支付功能，文中通过示例代码介绍的非常详细，对大家学习或者使用小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-06-06
这篇文章主要介绍了JS实现简单的星期格式转换功能,涉及JavaScript基于Date()对象的日期时间操作技巧,需要的朋友可以参考下2018-07-07
这篇文章主要介绍了javascript中的数据类型检测方法,结合实例形式分析了javascript数据类型并总结分析了常见的数据类型检测操作技巧,需要的朋友可以参考下2019-08-08
最新评论