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>
輪詢不斷監(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”，說(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>
輪詢不斷監(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)文章
『JavaScript』限制Input只能輸入數(shù)字實(shí)現(xiàn)思路及代碼
一個(gè)文字方塊必須限制只能輸入數(shù)字（或是小數(shù)點(diǎn)）并且要支援 IE 和 Firefox，接下來(lái)為大家介紹下如何解決這個(gè)需求2013-04-04
這篇文章主要介紹了JavaScript中this指向的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)JavaScript，感興趣的朋友可以了解下2020-09-09
怎樣用Javascript實(shí)現(xiàn)策略模式
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之策略模式，想學(xué)習(xí)設(shè)計(jì)模式的同學(xué)，一定要看一下2021-04-04
JavaScript自定義瀏覽器滾動(dòng)條兼容IE、 火狐和chrome
本文主要分享了使用原生JavaScript實(shí)現(xiàn)自定義瀏覽器滾動(dòng)條兼容IE、 火狐和chrome的思路與方法，具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
這篇文章主要介紹了在小程序中推送模板消息的實(shí)現(xiàn)方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
javascript 節(jié)點(diǎn)遍歷函數(shù)
火狐官網(wǎng)上找到的一組函數(shù)，相當(dāng)于treeWalker，有了它可以方便地在IE實(shí)現(xiàn)Traversal API 2的所有功能2010-03-03
滾動(dòng)條響應(yīng)鼠標(biāo)滑輪事件實(shí)現(xiàn)上下滾動(dòng)的js代碼
javascript實(shí)現(xiàn)滾動(dòng)條響應(yīng)鼠標(biāo)滑輪的實(shí)現(xiàn)上下滾動(dòng)，示例代碼如下2014-06-06
javascript勻速動(dòng)畫(huà)和緩沖動(dòng)畫(huà)詳解
這篇文章主要為大家詳細(xì)介紹了javascript勻速動(dòng)畫(huà)和緩沖動(dòng)畫(huà),具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
echarts tooltip自適應(yīng)寬高讓提示框適應(yīng)不同屏幕尺寸demo
這篇文章主要為大家介紹了echarts tooltip自適應(yīng)寬高讓提示框適應(yīng)不同屏幕尺寸,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
javascript 復(fù)雜的嵌套環(huán)境中輸出單引號(hào)和雙引號(hào)
如果簡(jiǎn)單的嵌套一般都是外面用雙引號(hào)，則里面用單引號(hào)，反之亦同，如果特別負(fù)責(zé)的嵌套大家看下如下的方法。2009-05-05