使用JavaScript判斷圖片是否加載完成的三種實(shí)現(xiàn)方式
更新時(shí)間：2014年05月04日 09:08:05 作者：
有時(shí)需要獲取圖片的尺寸，這需要在圖片加載完成以后才可以，本文有三個(gè)不錯(cuò)的實(shí)現(xiàn)方式在此與大家分享下
有時(shí)需要獲取圖片的尺寸，這需要在圖片加載完成以后才可以。有三種方式實(shí)現(xiàn)，下面一一介紹。
一、load事件
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>img - load event</title>
</head>
<body>
<img id="img1" src="http://pic1.win4000.com/wallpaper/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.win4000.com/wallpaper/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.win4000.com/wallpaper/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.win4000.com/wallpaper/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.win4000.com/wallpaper/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.win4000.com/wallpaper/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)加載完畢，停止輪詢。該屬性所有瀏覽器都支持。
您可能感興趣的文章:
- JS實(shí)現(xiàn)判斷圖片是否加載完成的方法分析
- JavaScript & jQuery完美判斷圖片是否加載完畢
- JS判斷圖片是否加載完成方法匯總(最新版)
- js判斷圖片加載完成后獲取圖片實(shí)際寬高的方法
- JavaScript判斷圖片是否已經(jīng)加載完畢的方法匯總
- js 判斷圖片是否加載完以及實(shí)現(xiàn)圖片的預(yù)下載
- js判斷背景圖片是否加載成功使用img的width實(shí)現(xiàn)
- 關(guān)于JS判斷圖片是否加載完成且獲取圖片寬度的方法
- js或者jquery判斷圖片是否加載完成實(shí)現(xiàn)代碼
- 如何基于JavaScript判斷圖片是否加載完成
相關(guān)文章
判斷當(dāng)前使用的是那個(gè)瀏覽器及瀏覽器的那個(gè)版本，根據(jù)瀏覽器版本來調(diào)整CSS的樣式，下面是獲取當(dāng)前瀏覽器的代碼,需要的朋友可以參考下2014-06-06
JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之二叉樹插入節(jié)點(diǎn)、生成二叉樹示例
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之二叉樹插入節(jié)點(diǎn)、生成二叉樹,結(jié)合實(shí)例形式較為詳細(xì)的分析了javascript二叉樹相關(guān)概念、定義、節(jié)點(diǎn)插入、遍歷輸出等相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
這篇文章主要介紹了使用JS獲取頁面上的所有標(biāo)簽 ,需要的朋友可以參考下2018-10-10
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)自定義滾動條組件的開發(fā)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)頁面左右滑動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
那么今天我就用JavaScript代碼來實(shí)現(xiàn)這個(gè)效果吧，那么首先介紹一下整個(gè)的思路，首先我們先將確定輸入密碼的位數(shù)，我的需求是5位，那么就用一個(gè)div標(biāo)簽包住5個(gè)input標(biāo)簽2015-12-12
javascript中使用new與不使用實(shí)例化對象的區(qū)別
這篇文章主要介紹了javascript中使用new與不使用實(shí)例化對象的區(qū)別的相關(guān)資料,需要的朋友可以參考下2015-06-06
今天小編就為大家分享一篇關(guān)于Layui Table隱藏列問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
js利用appendChild對<li>標(biāo)簽進(jìn)行排序的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨s利用appendChild對<li>標(biāo)簽進(jìn)行排序的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
這篇文章主要為大家詳細(xì)介紹了js版掃雷游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06