快捷導(dǎo)航

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事件

復(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)文章

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