判断图片是否加载完成
时间：2014-12-26 类别：Web前端 浏览量：1383
判断图片是否加载完成
判断图片是否加载完成一、load事件
通过向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>
二、jquery方法
为每个class为pic1的图片元素绑定事件，通过jquery的load方法，将元素渐现出来。
<script type="text/javascript">
$(function(){
$('.pic1').each(function() {
$(this).load(function(){
$(this).fadeIn();
});
});
})
</script>
三、img的complete属性
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>img - complete attribute</title>
</head>
<body>
<img id="img1" src="">
<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则表明图片已经加载完毕，停止轮询。该属性所有浏览器都支持。
标签：图片加载