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