一，load事件
<!DOCTYPE HTML>
<html>
<head>
<meta charset= "utf-8" >
<title>img - load event</title>
</head>
<body>
<img id= "img1" src= "http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg" >
<p id= "p1" >loading...</p>
<script type= "text/javascript" >
img1.onload = function () {
p1.innerHTML = 'loaded'
}
</script>
</body>
</html>
二、img的complete属性
<img id= "img" src= "http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg" >
<script type= "text/javascript" >
var img=document.getElementById("img")
var timer=setInterval(function(){
if(img.complete){
clearInterval(timer)
alert('加载完毕了')
}
},10)
采用轮询的方法，一旦加载完毕就弹窗
三，onload方法
通过向img标签添加onload属性，并填入相应的函数来执行后续的javascipt代码。如下代码例子中img元素默认是不显示的，通过onload判断加载完成后再将图片显示出来。
<img class="pic1" οnlοad="get(this)" src="..." style='display:none' />
<script type="text/javascript">
function get(ts){
ts.style.display = 'block'; //显示图片
}
</script>