JavaScript怎么判斷圖片是否加載完成以便獲取其尺寸
更新時間：2014年05月08日 09:57:41 作者：
需要獲取圖片的尺寸，就需要在圖片加載完成以后才可以，下面有個不錯的方法，大家不妨參考下
有時需要獲取圖片的尺寸，這需要在圖片加載完成以后才可以，求方法？
一、load事件
<!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>
測試，所有瀏覽器都顯示出了“l(fā)oaded”，說明所有瀏覽器都支持img的load事件。
二、readystatechange事件
<!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)加載完畢。測試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.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>
輪詢不斷監(jiān)測img的complete屬性，如果為true則表明圖片已經(jīng)加載完畢，停止輪詢。該屬性所有瀏覽器都支持。
一、load事件
復(fù)制代碼 代碼如下:
<!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>
測試，所有瀏覽器都顯示出了“l(fā)oaded”，說明所有瀏覽器都支持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)加載完畢。測試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>
輪詢不斷監(jiān)測img的complete屬性，如果為true則表明圖片已經(jīng)加載完畢，停止輪詢。該屬性所有瀏覽器都支持。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了JS學(xué)習(xí)筆記之閉包,結(jié)合具體案例形式分析了javascript實現(xiàn)與使用閉包的相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了功能完善的小程序日歷組件的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章再次為大家詳細(xì)介紹了JavaScript簡單實現(xiàn)彈出拖拽窗口的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-06-06
js入門之Function函數(shù)的使用方法【新手必看】
本篇文章主要介紹js Function函數(shù)的使用方法，應(yīng)該對初學(xué)Js的朋友們會有所幫助,下面就隨小編一起來看下吧2016-11-11
IE下Ajax緩存問題的快速解決方法(get方式)。網(wǎng)上搜了很多解決方案，一大把，下面是我認(rèn)為比較全面的解決方案。主要分為客戶端解決和服務(wù)端解決2014-01-01
JavaScript中的Array對象是一個動態(tài)的數(shù)組，也是一個Stack,還是一個Dictionary2011-01-01
這篇文章主要介紹了js實時獲取并顯示當(dāng)前時間的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了微信小程序與webview交互實現(xiàn)支付功能，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用小程序具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
JS實現(xiàn)簡單的星期格式轉(zhuǎn)換功能示例
這篇文章主要介紹了JS實現(xiàn)簡單的星期格式轉(zhuǎn)換功能,涉及JavaScript基于Date()對象的日期時間操作技巧,需要的朋友可以參考下2018-07-07
javascript中的數(shù)據(jù)類型檢測方法詳解
這篇文章主要介紹了javascript中的數(shù)據(jù)類型檢測方法,結(jié)合實例形式分析了javascript數(shù)據(jù)類型并總結(jié)分析了常見的數(shù)據(jù)類型檢測操作技巧,需要的朋友可以參考下2019-08-08