img圖片無法顯示利用onerror事件顯示替代圖片

admin發表於2017-03-23

在實際網頁中,圖片的使用基本是不可避免的,尤其是一些圖片站或者產品展示型別的網站,但是有時候圖片載入的時候可能會出現一些問題,當然引起這些問題的原因是多種多樣的,比如網路問題、或者圖片確實不存在等等,如果出現這些問題可能會導致頁面極為尷尬,如果當出現圖片不能夠載入的時候顯示預設的替代圖片就更為人性化一些。

html程式碼如下:

[HTML] 純文字檢視 複製程式碼
<img width="32" height="32" onerror="errorImg(this)" src="antzone.jpg"/>

js程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
function errorImg(img){ 
  img.src="image/default.jpg"; 
  img.onerror=null; 
}

當圖片不能夠載入成功就會觸發onerror事件,然後執行事件處理函式,設定預設替代圖片即可。

相關文章