判断图片是否加载完成的六种方式
判断图⽚是否加载完成的六种⽅式⼀、load事件
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>img - load event</title>
</head>
<body>
<img id="img1"src="pic1.win4000/wallpaper/f/51c3bb99a21ea.jpg">
<p id="p1"&</p>
<script type="text/javascript">
九型人格测试题
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="pic1.win4000/wallpaper/f/51c3bb99a21ea.jpg">
<p id="p1"&</p>连云港旅游
<script type="text/javascript">
adyState=="complete"||adyState=="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="pic1.win4000/wallpaper/f/51c3bb99a21ea.jpg">
<p id="p1"&</p>
<script type="text/javascript">
functionimgLoad(img, callback) {
vartimer = setInterval(function() {
if(imgplete) {
callback(img)
二手房 税费
clearInterval(timer)
}
}, 50)
}
imgLoad(img1,function() {
p1.innerHTML('加载完毕')
})
</script>
</body>
</html>
轮询不断监测img的complete属性，如果为true则表明图⽚已经加载完毕，停⽌轮询。该属性所有浏览器都⽀持。
onload⽅法
通过向img标签添加onload属性，并填⼊相应的函数来执⾏后续的javascipt代码。如下代码例⼦中img元素默认是不显⽰的，通过onload判断加载完成后再将图⽚显⽰出来。
<img class="pic1" onload="get(this)" src="..." style='display:none' />
<script type="text/javascript">
function get(ts){
ts.style.display = 'block';  //显⽰图⽚
}</script>
优点：可以将javascript代码部分放置于页⾯的任何部分加载，并且可以⽤于多数任意图⽚上。使⽤⽐较简单，易理解。
缺点：必须在每个标签上都贴上onlaod属性，在某些⽆法直接操作HTML代码，或者需要代码精简的情况下不适⽤
javascipt原⽣⽅法
选取指定ID的图⽚，通过onload指定回调⽅法，在图⽚加载完成后弹出“图⽚加载已完成”字样提⽰。
<img id="pic1" src="..." />
<script language="JavaScript">
一个字网名
alert("图⽚加载已完成");
}
</script>
优点：简单易⽤，不影响HTML代码。
缺点：只能指定⼀个元素，javascipt代码必须置于图⽚元素的下⽅
jquery⽅法
为每个class为pic1的图⽚元素绑定事件，通过jquery的load⽅法，将元素渐现出来。
注意，不要在$(document).ready()⾥绑定load事件。
<script type="text/javascript">
$(function(){
$('.pic1').each(function() {
$(this).load(function(){
$(this).fadeIn();
});
});
})
</script>
优点：可以批量绑定元素事件，并且不影响HTML代码内容
缺点：需要jquery库的⽀持，代码需要放置到需要操作元素的下⽅。

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