首页 / JAVASCRIPT / JavaScript怎么判断图片是否加载完成以便获取其尺寸

JavaScript怎么判断图片是否加载完成以便获取其尺寸

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript怎么判断图片是否加载完成以便获取其尺寸，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1582字，纯文字阅读大概需要3分钟。

内容图文

有时需要获取图片的尺寸，这需要在图片加载完成以后才可以，求方法？

一、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怎么判断图片是否加载完成以便获取其尺寸全部内容，希望文章能够帮你解决JavaScript怎么判断图片是否加载完成以便获取其尺寸所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/362495.html

来源：【匿名】