JavaScript通過使用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)頁圖片不存在時(shí)不顯示叉叉圖片
當(dāng)在頁面顯示的時(shí)候,萬一圖片被移動(dòng)了位置或者丟失的話,將會在頁面顯示一個(gè)帶X的圖片,很是影響用戶的體驗(yàn)。即使使用alt屬性給出了”圖片XX”的提示信息,也起不了多大作用。
其實(shí),可以這樣處理:當(dāng)圖片不存在的時(shí)候,會觸發(fā)onerror事件,我們可以在該事件中做一下補(bǔ)救的工作,比如:
1、讓這個(gè)圖片元素隱藏:
為了美觀當(dāng)網(wǎng)頁圖片不存在時(shí)不顯示叉叉圖片 src="圖片的url地址" alt="圖片XX" onerror="this.style.display='none'"/>
2、用默認(rèn)的圖片替換:
為了美觀當(dāng)網(wǎng)頁圖片不存在時(shí)不顯示叉叉圖片 src="圖片的url地址" alt="圖片XX" onerror="this.src='默認(rèn)圖片的url地址'"/>
注意:如果使用不當(dāng),在IE內(nèi)核的瀏覽器下會造成死循環(huán)。比如:當(dāng)【默認(rèn)圖片的url地址】也加載不成功(比如網(wǎng)速比較慢的時(shí)候)或不存在的話,就會反復(fù)的加載,最后造成堆棧溢出錯(cuò)誤。
因此, 需要用下面兩種方法解決:
a、更改 onerror 代碼為其它處理方式或者確保 onerror 中的默認(rèn)圖片足夠小,并且存在。
b、控制onerror事件只觸發(fā)一次,需要增加這句話:this.onerror=null; 增加后如下:
為了美觀當(dāng)網(wǎng)頁圖片不存在時(shí)不顯示叉叉圖片 src="圖片的url地址" alt="圖片XX" onerror="this.src='默認(rèn)圖片的url地址;this.onerror=null'"/>
經(jīng)測試,上面的方法在IE各個(gè)版本及谷歌、火狐瀏覽器中都支持。
相關(guān)文章
JS實(shí)現(xiàn)的手機(jī)端精簡幻燈片效果
這篇文章主要介紹了JS實(shí)現(xiàn)的手機(jī)端精簡幻燈片效果,涉及javascript結(jié)合時(shí)間函數(shù)動(dòng)態(tài)修改頁面元素的相關(guān)技巧,需要的朋友可以參考下2016-09-09Firefox getBoxObjectFor getBoundingClientRect聯(lián)系
Firefox在含有flash的網(wǎng)頁上提示:不建議使用 getBoxObjectFor() 。 請使用 element.getBoundingClientRect()。2008-10-10JS實(shí)現(xiàn)4位隨機(jī)驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)4位隨機(jī)驗(yàn)證碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-10-10JS兼容瀏覽器的導(dǎo)出Excel(CSV)文件的方法
項(xiàng)目中經(jīng)常需要導(dǎo)出Excel文件,不在服務(wù)器端處理而是富客戶端采用Javascript腳本處理數(shù)據(jù)并導(dǎo)出文件2014-05-05Javascript實(shí)現(xiàn)Web顏色值轉(zhuǎn)換
這篇文章主要介紹了Javascript實(shí)現(xiàn)Web顏色值轉(zhuǎn)換,需要的朋友可以參考下2015-02-02js setTimeout實(shí)現(xiàn)延遲關(guān)閉彈出層
有時(shí)候我們希望彈出層能夠?qū)崿F(xiàn)延遲關(guān)閉,并且鼠標(biāo)在彈出層區(qū)域移動(dòng)的時(shí)候能夠保持顯現(xiàn),下面是具體的實(shí)現(xiàn)代碼。2010-04-04利用js實(shí)現(xiàn)遮罩以及彈出可移動(dòng)登錄窗口
本篇文章是對使用js實(shí)現(xiàn)遮罩以及彈出可移動(dòng)登錄窗口的實(shí)現(xiàn)方法進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-07-07JavaScript算法學(xué)習(xí)之冒泡排序和選擇排序
這篇文章主要給大家介紹了關(guān)于JavaScript算法學(xué)習(xí)之冒泡排序和選擇排序的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11