一、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>
測試，所有瀏覽器都顯示出了“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.win4000.com/wallpaper/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.win4000.com/wallpaper/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則表明圖片已經加載完畢，停止輪詢。該屬性所有瀏覽器都支持。
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">
document.getElementById("pic1").onload = function () {
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庫的支持，代碼需要放置到需要操作元素的下方。