標(biāo)簽(空格分隔): js
圖片加載失敗了,顯示一張裂了的小圖劈狐,很影響頁(yè)面撕瞧,所以如何才能處理這種情況呢陵叽?
圖片有一個(gè)事件,
onerror:圖像加載過程中發(fā)生錯(cuò)誤時(shí)被觸發(fā)丛版。
onabort:圖片加載的時(shí)候巩掺,用戶通過點(diǎn)擊停止加載時(shí)觸發(fā),通常在這里觸發(fā)一個(gè)提示:“圖片正在加載”硼婿。
onload:當(dāng)圖片加載完成之后觸發(fā)锌半。
關(guān)于onerror,到底什么情況下才會(huì)觸發(fā)呢寇漫?
- 1.src屬性為空或者null
- 2.src的地址與當(dāng)前頁(yè)面的地址一致
- 3.在加載過程中因?yàn)槟承┰虮罎?/li>
- 4.圖片的元數(shù)據(jù)已損壞刊殉,無法知道尺寸,并且<img>標(biāo)簽也沒定義尺寸
- 5.當(dāng)前的user agent不支持該圖片格式
兩種辦法
1.寫在行內(nèi)
隱藏
<img src="http://172.16.130.120:20154/4541.jpg" onerror="javascript:this.style.display='none'">
換成默認(rèn)圖片
<img src="http://172.16.130.130:20154/319f24126.jpg" alt="" onerror="this.src='../../../../image/epvl/case_default_video.png';this.onerror='null' ">
2.監(jiān)聽全局州胳,如果有換成默認(rèn)圖片
<img src="http://172.16.229.120:20154/2630ec44.jpg" alt="">
var defautImg = './default_video.png'//本地圖片地址
document.addEventListener("error", function (e) {
console.log("e------",e);
var elem = e.target;
if (elem.tagName.toLowerCase() == 'img') {
elem.src = defautImg;
}
}, true);
這種辦法必須方法在dom渲染之前定義记焊,不然圖片加載失敗后無法找到。