開發過程中是不是經常遇到這種情況，圖片加載失敗了，顯示一張裂了的小圖，很影響頁面，所以如何才能處理這種情況呢？

兩種辦法，分為原生和jQuery

A. 先說原生方法：

首先我們了解下，圖片除了最主要的src路徑外，存在幾個常用的事件：

onerror：圖像加載過程中發生錯誤時被觸發。

onabort：圖片加載的時候，用戶通過點擊停止加載時觸發，通常在這里觸發一個提示：“圖片正在加載”。

onload：當圖片加載完成之后觸發。

關于onerror，到底什么情況下才會觸發呢？

1.src屬性為空或者null
2.src的地址與當前頁面的地址一致
3.在加載過程中因為某些原因崩潰
4.圖片的元數據已損壞，無法知道尺寸，并且<img>標簽也沒定義尺寸
5.當前的user agent不支持該圖片格式

你現在應該已經知道了，我們可以通過onerror事件來觸發回調處理：

給圖片加載失敗綁定onImg()方法

兩種處理辦法，第一種給圖片添加默認圖片：

第二種，隱藏圖片：

現在就可以通過這兩種辦法優雅的解決裂圖了，但是需要注意：

這種辦法必須方法在dom渲染之前定義，不然圖片加載失敗后無法找到noImg()方法：

我的項目是用的vue，而且項目部署在海外，所以如果沒有翻墻的話，加載時間會很久而且會404，所以像我這種情況也可以把處理函數直接寫在dom里面：

B. jQuery監聽

注意：jQuery要在img之前引入，函數定義要在img之后

img的另外兩個事件onabort、onload都是一樣的，可以自己測試體驗一下，這里就不多寫了，希望本文對你有所幫助！

總結

以上是生活随笔為你收集整理的图片404加载失败后如何处理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。