JS實(shí)現(xiàn)判斷圖片是否加載完成的方法分析
本文實(shí)例講述了JS實(shí)現(xiàn)判斷圖片是否加載完成的方法。分享給大家供大家參考，具體如下：
1、onload事件
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
<img src="images/background.png">
<p>loading...</p>
<script type="text/javascript">
document.getElementsByTagName("img")[0].onload =function() {
document.getElementsByTagName("p")[0].innerHTML ='加載完成！';
}
</script>
</body>
</html>
2、complete屬性
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
<img src="images/background.png">
<p>loading...</p>
<script type="text/javascript">
function imgLoad(img, callback) {
var timer = setInterval(function() {
if (img.complete) {
callback(img);
clearInterval(timer);
}
}, 50);
}
imgLoad(document.getElementsByTagName("img")[0], function() {
document.getElementsByTagName("p")[0].innerHTML = '加載完成！';
})
</script>
</body>
</html>
3、onreadystatechange事件
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
<img src="images/background.png">
<p>loading...</p>
<script type="text/javascript">
document.getElementsByTagName("img")[0].onreadystatechange = function() {
if (this.readyState=="complete" || this.readyState=="loaded")
document.getElementsByTagName("p")[0].innerHTML = '加載完成';
}
</script>
</body>
</html>
注意：只有IE6-IE10支持onreadystatechange事件，其它瀏覽器不支持。
4、onerror事件
網(wǎng)絡(luò)狀況不好或圖片不存在都可能觸發(fā)onerror事件。
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
<img src="images/notExistImg.png">
<p>loading...</p>
<script type="text/javascript">
document.getElementsByTagName("img")[0].onload =function() {
document.getElementsByTagName("p")[0].innerHTML ='加載完成！';
}
document.getElementsByTagName("img")[0].onerror =function() {
document.getElementsByTagName("img")[0].src = "images/background.png";
}
</script>
</body>
</html>
觸發(fā)onerror事件后，會(huì)為img指定一個(gè)新的圖片。
問(wèn)題：
新圖片存在則顯示新圖片，但若新圖片也不存在，則將繼續(xù)觸發(fā)onerror，導(dǎo)致頁(yè)面循環(huán)跳動(dòng)。
解決：
通過(guò)將onerror置為null，來(lái)防止頁(yè)面循環(huán)跳動(dòng)。
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
<img src="images/notExistImg.png">
<p>loading...</p>
<script type="text/javascript">
document.getElementsByTagName("img")[0].onload =function() {
document.getElementsByTagName("p")[0].innerHTML ='加載完成！';
}
document.getElementsByTagName("img")[0].onerror =function() {
document.getElementsByTagName("img")[0].src = "images/backgeound.png";
document.getElementsByTagName("img")[0].onerror = null;
document.getElementsByTagName("p")[0].innerHTML ='加載失?。?;
}
</script>
</body>
</html>
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript圖片操作技巧大全》、《JavaScript運(yùn)動(dòng)效果與技巧匯總》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- JavaScript & jQuery完美判斷圖片是否加載完畢
- JS判斷圖片是否加載完成方法匯總(最新版)
- js判斷圖片加載完成后獲取圖片實(shí)際寬高的方法
- JavaScript判斷圖片是否已經(jīng)加載完畢的方法匯總
- js 判斷圖片是否加載完以及實(shí)現(xiàn)圖片的預(yù)下載
- 使用JavaScript判斷圖片是否加載完成的三種實(shí)現(xiàn)方式
- js判斷背景圖片是否加載成功使用img的width實(shí)現(xiàn)
- 關(guān)于JS判斷圖片是否加載完成且獲取圖片寬度的方法
- js或者jquery判斷圖片是否加載完成實(shí)現(xiàn)代碼
- 如何基于JavaScript判斷圖片是否加載完成
相關(guān)文章
這篇文章主要介紹了Javascript中prototype屬性的相關(guān)資料，本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧2016-09-09
10個(gè)很少使用的JavaScript?Console方法分享
你一定聽(tīng)說(shuō)過(guò)?console.log()?,而且可能一直在使用它,在本文中,我們將探討一些最有用的控制臺(tái)方法,以及它們?cè)跀?shù)據(jù)可視化、調(diào)試等方面的用途,感興趣的小伙伴可以學(xué)習(xí)一下2023-09-09
vue?element?loading遮罩層添加按鈕功能實(shí)現(xiàn)
這篇文章主要介紹了vue?element?loading遮罩層添加按鈕功能實(shí)現(xiàn),通過(guò)實(shí)例代碼補(bǔ)充介紹了vue+elementui的this.$loading遮罩使用方法,需要的朋友可以參考下2024-03-03
利用uniapp開(kāi)發(fā)APP時(shí)的調(diào)試/安卓打包等詳解
uni-app??是一個(gè)使用??Vue.js開(kāi)發(fā)所有前端應(yīng)用的框架,開(kāi)發(fā)者編寫(xiě)一套代碼,下面這篇文章主要給大家介紹了關(guān)于利用uniapp開(kāi)發(fā)APP時(shí)的調(diào)試/安卓打包等的相關(guān)資料,需要的朋友可以參考下2022-12-12
容易被忽略的JS腳本特性，學(xué)習(xí)js的朋友可以參考下。2011-09-09
在“按需加載”的需求中，我們經(jīng)常會(huì)判斷當(dāng)腳本加載完成時(shí)，返回一個(gè)回調(diào)函數(shù)，那如何去判斷腳本的加載完成呢？2009-05-05
微信小程序MoxB實(shí)現(xiàn)全局狀態(tài)管理流程詳解
這篇文章主要介紹了微信小程序使用MoxB實(shí)現(xiàn)全局狀態(tài)管理方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-11-11
用JavaScript做簡(jiǎn)易的購(gòu)物車(chē)的代碼示例
JS實(shí)現(xiàn)“隱藏與顯示”功能(多種方法)