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事件，我們可以在該事件中做一下補救的工作，比如：
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)文章
這篇文章主要介紹了JS實現(xiàn)的手機端精簡幻燈片效果,涉及javascript結(jié)合時間函數(shù)動態(tài)修改頁面元素的相關(guān)技巧,需要的朋友可以參考下2016-09-09
Firefox getBoxObjectFor getBoundingClientRect聯(lián)系
Firefox在含有flash的網(wǎng)頁上提示：不建議使用 getBoxObjectFor() 。 請使用 element.getBoundingClientRect()。2008-10-10
這篇文章主要介紹了微信小程序日歷彈窗選擇器，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)4位隨機驗證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
JS兼容瀏覽器的導(dǎo)出Excel（CSV）文件的方法
項目中經(jīng)常需要導(dǎo)出Excel文件，不在服務(wù)器端處理而是富客戶端采用Javascript腳本處理數(shù)據(jù)并導(dǎo)出文件2014-05-05
這篇文章主要介紹了微信小程序倒計時功能實例代碼,當(dāng)單擊按鈕彈出一個半透明的彈出層，在規(guī)定時間內(nèi)激活關(guān)閉按鈕，關(guān)閉彈出層。需要的朋友可以參考下2018-07-07
Javascript實現(xiàn)Web顏色值轉(zhuǎn)換
這篇文章主要介紹了Javascript實現(xiàn)Web顏色值轉(zhuǎn)換,需要的朋友可以參考下2015-02-02
js setTimeout實現(xiàn)延遲關(guān)閉彈出層
有時候我們希望彈出層能夠?qū)崿F(xiàn)延遲關(guān)閉，并且鼠標(biāo)在彈出層區(qū)域移動的時候能夠保持顯現(xiàn)，下面是具體的實現(xiàn)代碼。2010-04-04
本篇文章是對使用js實現(xiàn)遮罩以及彈出可移動登錄窗口的實現(xiàn)方法進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-07-07
JavaScript算法學(xué)習(xí)之冒泡排序和選擇排序
這篇文章主要給大家介紹了關(guān)于JavaScript算法學(xué)習(xí)之冒泡排序和選擇排序的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11