怎么解決網(wǎng)頁圖片不存在時不顯示默認(rèn)圖片問題

本篇內(nèi)容主要講解“怎么解決網(wǎng)頁圖片不存在時不顯示默認(rèn)圖片問題”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“怎么解決網(wǎng)頁圖片不存在時不顯示默認(rèn)圖片問題”吧!

　　當(dāng)在頁面顯示的時候，萬一圖片被移動了位置或者丟失的話，將會在頁面顯示一個帶X的圖片，很是影響用戶的體驗。即使使用alt屬性給出了”圖片XX”的提示信息，也起不了多大作用。

　　網(wǎng)頁不顯示圖片處理方法

　　其實，可以這樣處理：當(dāng)圖片不存在的時候，會觸發(fā)onerror事件，我們可以在該事件中做一下補(bǔ)救的工作，比如：

　　1、讓這個圖片元素隱藏：

　　<imgsrc="圖片的url地址"alt="圖片XX"οnerrοr="this.style.display='none'"/>

　　2、用默認(rèn)的圖片替換：

　　<imgsrc="圖片的url地址"alt="圖片XX"οnerrοr="this.src='默認(rèn)圖片的url地址'"/>

　　注意：如果使用不當(dāng)，在IE內(nèi)核的瀏覽器下會造成死循環(huán)。比如：當(dāng)【默認(rèn)圖片的url地址】也加載不成功（比如網(wǎng)速比較慢的時候）或不存在的話，就會反復(fù)的加載，最后造成堆棧溢出錯誤。

　　圖片不存在時不顯示默認(rèn)圖片

　　因此，需要用下面兩種方法解決：

　　a、更改onerror代碼為其它處理方式或者確保onerror中的默認(rèn)圖片足夠小，并且存在。

　　b、控制onerror事件只觸發(fā)一次（如果默認(rèn)圖片加載也有問題會導(dǎo)致事件一直觸發(fā)），需要增加這句話：this.οnerrοr=null;增加后如下：

　　<imgsrc="圖片的url地址"alt="圖片XX"οnerrοr="this.src='默認(rèn)圖片的url地址;this.οnerrοr=null'"/>

到此，相信大家對“怎么解決網(wǎng)頁圖片不存在時不顯示默認(rèn)圖片問題”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！