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