JavaScript通過(guò)使用onerror設(shè)置默認(rèn)圖像顯示代替alt
JavaScript代碼
//圖像加載出錯(cuò)時(shí)的處理
function errorImg(img) {
img.src = "默認(rèn)圖片.jpg";
img.onerror = null;
}
html代碼
<img width="32" height="32" src="1.jpg" onerror="errorImg(this)" />
為了美觀當(dāng)網(wǎng)頁(yè)圖片不存在時(shí)不顯示叉叉圖片
當(dāng)在頁(yè)面顯示的時(shí)候，萬(wàn)一圖片被移動(dòng)了位置或者丟失的話，將會(huì)在頁(yè)面顯示一個(gè)帶X的圖片，很是影響用戶的體驗(yàn)。即使使用alt屬性給出了”圖片XX”的提示信息，也起不了多大作用。
其實(shí)，可以這樣處理：當(dāng)圖片不存在的時(shí)候，會(huì)觸發(fā)onerror事件，我們可以在該事件中做一下補(bǔ)救的工作，比如：
1、讓這個(gè)圖片元素隱藏：
為了美觀當(dāng)網(wǎng)頁(yè)圖片不存在時(shí)不顯示叉叉圖片 src="圖片的url地址" alt="圖片XX" onerror="this.style.display='none'"/>
2、用默認(rèn)的圖片替換：
為了美觀當(dāng)網(wǎng)頁(yè)圖片不存在時(shí)不顯示叉叉圖片 src="圖片的url地址" alt="圖片XX" onerror="this.src='默認(rèn)圖片的url地址'"/>
注意：如果使用不當(dāng)，在IE內(nèi)核的瀏覽器下會(huì)造成死循環(huán)。比如：當(dāng)【默認(rèn)圖片的url地址】也加載不成功（比如網(wǎng)速比較慢的時(shí)候）或不存在的話，就會(huì)反復(fù)的加載，最后造成堆棧溢出錯(cuò)誤。
因此， 需要用下面兩種方法解決：
a、更改 onerror 代碼為其它處理方式或者確保 onerror 中的默認(rèn)圖片足夠小，并且存在。
b、控制onerror事件只觸發(fā)一次，需要增加這句話：this.onerror=null; 增加后如下：
為了美觀當(dāng)網(wǎng)頁(yè)圖片不存在時(shí)不顯示叉叉圖片 src="圖片的url地址" alt="圖片XX" onerror="this.src='默認(rèn)圖片的url地址;this.onerror=null'"/>
經(jīng)測(cè)試，上面的方法在IE各個(gè)版本及谷歌、火狐瀏覽器中都支持。
相關(guān)文章
將input框中輸入內(nèi)容顯示在相應(yīng)的div中【三種方法可選】
本篇文章主要介紹了在input框中輸入內(nèi)容，會(huì)相應(yīng)的顯示在下面的div中的不同做法：js方法；jQuery方法；AngularJs方法，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-05-05
微信小程序保存圖片到相冊(cè)權(quán)限設(shè)置
這篇文章主要為大家詳細(xì)介紹了微信小程序保存圖片到相冊(cè)權(quán)限設(shè)置，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-04-04
本篇文章主要介紹了用ES6寫(xiě)全屏滾動(dòng)插件的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
今天小編就為大家分享一篇解決LayUI表單獲取不到data的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
HTML<video>元素用于在HTML或者XHTML文檔中嵌入媒體播放器,用于支持文檔內(nèi)的視頻播放,你也可以將<video>標(biāo)簽用于音頻內(nèi)容,在前端中實(shí)現(xiàn)音頻和視頻播放通常涉及使用HTML5的<audio>和<video>元素以及JavaScript來(lái)控制這些媒體元素的播放、暫停、音量等屬性2023-10-10
認(rèn)識(shí)less和webstrom的less配置方法
下面小編就為大家?guī)?lái)一篇認(rèn)識(shí)less和webstrom的less配置方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
本文重點(diǎn)給大家介紹javascript中的原型鏈知識(shí)，本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起看下吧2016-06-06
JavaScript Dom實(shí)現(xiàn)輪播圖原理和實(shí)例
這篇文章主要為大家詳細(xì)介紹了JavaScript Dom實(shí)現(xiàn)輪播圖原理和實(shí)例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-02-02
微信小程序?qū)崿F(xiàn)列表滾動(dòng)頭部吸頂?shù)氖纠a
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)列表滾動(dòng)頭部吸頂?shù)氖纠a，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
