JS判断图⽚是否加载完成⽅法汇总（最新版）
有时需要获取图⽚的尺⼨，这需要在图⽚加载完成以后才可以。下⾯⼩编给⼤家整理了⼏种关于JS判断图⽚是否加载完成⽅法汇总，⼀起看看吧。
⼀、load事件
<script type="text/javascript">
$('img').onload = function() {
//code
}
</script>
优点：简单易⽤，不影响HTML代码。
缺点：只能指定⼀个元素，javascipt代码必须置于图⽚元素的下⽅
⼆、jquery⽅法
<script type="text/javascript">
$(function(){
$('.pic1').each(function() {
$(this).load(function(){
$(this).fadeIn();
});
});
})
</script>
注意，不要在$(document).ready()⾥绑定load事件。
优点：可以批量绑定元素事件，并且不影响HTML代码内容
缺点：需要jquery库的⽀持，代码需要放置到需要操作元素的下⽅。
三、readystatechange事件
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-">
<title>img - readystatechange event</title>
</head>
<body>
<img id="img" src="pic.win/wallpaper/f/cbbaea.jpg">
<p id="p"&</p>
<script type="text/javascript">
adyState=="complete"||adyState=="loaded"){
p.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>
jquery在线图片
<body>
<img id="img1" src="pic1.win4000/wallpaper/f/51c3bb99a21ea.jpg">
<p id="p1"&</p>
<script type="text/javascript">
function imgLoad(img, callback) {
var timer = setInterval(function() {
if (imgplete) {
callback(img)
clearInterval(timer)
}
}, 50)
}
imgLoad(img1, function() {
p1.innerHTML('加载完毕')
})
</script>
</body>
</html>
轮询不断监测img的complete属性，如果为true则表明图⽚已经加载完毕，停⽌轮询。该属性所有浏览器都⽀持。
以上内容是⼩编给⼤家介绍的JS判断图⽚是否加载完成⽅法汇总，希望对⼤家有所帮助，同时也⾮常感谢⼤家对⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。