 
<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>img - load event</title> 
</head> 
<body> 
<img id="img1" src="http://pic1.xxx.com/wall/f/51c3bb99a21ea.jpg"> 
<p id="p1">loading...</p> 
<script type="text/javascript"> 
img1.onload = function() { 
p1.innerHTML = 'loaded' 
} 
</script> 
</body> 
</html> 

測(cè)試，所有瀏覽器都顯示出了“l(fā)oaded”，說(shuō)明所有瀏覽器都支持img的load事件。

二、readystatechange事件

復(fù)制代碼代碼如下:

 
<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>img - readystatechange event</title> 
</head> 
<body> 
<img id="img1" src="http://pic1.xxx.com/wall/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則表明圖片已經(jīng)加載完畢。測(cè)試IE6-IE10支持該事件，其它瀏覽器不支持。

三、img的complete屬性

復(fù)制代碼代碼如下:

 
<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>img - complete attribute</title> 
</head> 
<body> 
<img id="img1" src="http://pic1.xxx.com/wall/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> 

輪詢(xún)不斷監(jiān)測(cè)img的complete屬性，如果為true則表明圖片已經(jīng)加載完畢，停止輪詢(xún)。該屬性所有瀏覽器都支持。

您可能感興趣的文章:

相關(guān)文章

JS學(xué)習(xí)筆記之閉包小案例分析
這篇文章主要介紹了JS學(xué)習(xí)筆記之閉包,結(jié)合具體案例形式分析了javascript實(shí)現(xiàn)與使用閉包的相關(guān)操作技巧,需要的朋友可以參考下
2019-05-05
功能完善的小程序日歷組件的實(shí)現(xiàn)
這篇文章主要介紹了功能完善的小程序日歷組件的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-03-03
JavaScript簡(jiǎn)單實(shí)現(xiàn)彈出拖拽窗口（二）
這篇文章再次為大家詳細(xì)介紹了JavaScript簡(jiǎn)單實(shí)現(xiàn)彈出拖拽窗口的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-06-06
js入門(mén)之Function函數(shù)的使用方法【新手必看】
本篇文章主要介紹js Function函數(shù)的使用方法，應(yīng)該對(duì)初學(xué)Js的朋友們會(huì)有所幫助,下面就隨小編一起來(lái)看下吧
2016-11-11
IE下Ajax緩存問(wèn)題的快速解決方法(get方式)
IE下Ajax緩存問(wèn)題的快速解決方法(get方式)。網(wǎng)上搜了很多解決方案，一大把，下面是我認(rèn)為比較全面的解決方案。主要分為客戶(hù)端解決和服務(wù)端解決
2014-01-01
JavaScript中的Array對(duì)象使用說(shuō)明
JavaScript中的Array對(duì)象是一個(gè)動(dòng)態(tài)的數(shù)組，也是一個(gè)Stack,還是一個(gè)Dictionary
2011-01-01
詳解js實(shí)時(shí)獲取并顯示當(dāng)前時(shí)間的方法
這篇文章主要介紹了js實(shí)時(shí)獲取并顯示當(dāng)前時(shí)間的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
微信小程序與webview交互實(shí)現(xiàn)支付功能
這篇文章主要介紹了微信小程序與webview交互實(shí)現(xiàn)支付功能，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用小程序具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-06-06
JS實(shí)現(xiàn)簡(jiǎn)單的星期格式轉(zhuǎn)換功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)簡(jiǎn)單的星期格式轉(zhuǎn)換功能,涉及JavaScript基于Date()對(duì)象的日期時(shí)間操作技巧,需要的朋友可以參考下
2018-07-07
javascript中的數(shù)據(jù)類(lèi)型檢測(cè)方法詳解
這篇文章主要介紹了javascript中的數(shù)據(jù)類(lèi)型檢測(cè)方法,結(jié)合實(shí)例形式分析了javascript數(shù)據(jù)類(lèi)型并總結(jié)分析了常見(jiàn)的數(shù)據(jù)類(lèi)型檢測(cè)操作技巧,需要的朋友可以參考下
2019-08-08