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”,說(shuō)明所有瀏覽器都支持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>
輪詢(xún)不斷監(jiān)測(cè)img的complete屬性,如果為true則表明圖片已經(jīng)加載完畢,停止輪詢(xún)。該屬性所有瀏覽器都支持。
一、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”,說(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)。該屬性所有瀏覽器都支持。
您可能感興趣的文章:
- 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)文章
JavaScript簡(jiǎn)單實(shí)現(xiàn)彈出拖拽窗口(二)
這篇文章再次為大家詳細(xì)介紹了JavaScript簡(jiǎn)單實(shí)現(xiàn)彈出拖拽窗口的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-06-06js入門(mén)之Function函數(shù)的使用方法【新手必看】
本篇文章主要介紹js Function函數(shù)的使用方法,應(yīng)該對(duì)初學(xué)Js的朋友們會(huì)有所幫助,下面就隨小編一起來(lái)看下吧2016-11-11IE下Ajax緩存問(wèn)題的快速解決方法(get方式)
IE下Ajax緩存問(wèn)題的快速解決方法(get方式)。網(wǎng)上搜了很多解決方案,一大把,下面是我認(rèn)為比較全面的解決方案。主要分為客戶(hù)端解決和服務(wù)端解決2014-01-01JavaScript中的Array對(duì)象使用說(shuō)明
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í)間的方法,文中通過(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-06JS實(shí)現(xiàn)簡(jiǎn)單的星期格式轉(zhuǎn)換功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)簡(jiǎn)單的星期格式轉(zhuǎn)換功能,涉及JavaScript基于Date()對(duì)象的日期時(shí)間操作技巧,需要的朋友可以參考下2018-07-07javascript中的數(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