js 設置img標籤的src資源沒法找到的替代圖片(經過img的屬性設置)

在網站的前端頁面設計中，要考慮到img圖片資源的存在性，若是img的src圖片資源不存在或顯示不出來，則須要顯示默認的圖片。如何作到呢？

1、監聽document的error事件

document.addEventListener("error", function (e) {
    var elem = e.target;
    if (elem.tagName.toLowerCase() === 'img') {
        var notFoundImgSrt = $(elem).attr("notFoundSrc");
        if (notFoundImgSrt) {
            $.get(notFoundImgSrt, null, function (response, status, xhr) {
                if (xhr.status === 200)
                    elem.src = notFoundImgSrt;
            });
        }
    }
}, true);

img的onerror事件是不冒泡的，所以咱們得本身手動寫代碼，監聽document的error事件。若是當前發出error事件的目標是img標籤，則找到該img標籤的notFoundSrc屬性，並經過ajax去判斷當前站點是否存在該默認圖片，若是存在該默認圖片，則將其賦值該img的src屬性。

 

2、設置img標籤的notFoundSrc屬性

  <img src="xxxxx" alt=""  notFoundSrc="images/imgNotFound.png"/>

由代碼能夠看見，xxxxx不是一個真實圖片資源的路徑，所以：

一、img標籤必會觸發其error事件；

二、因爲咱們自定義了一個document的error監聽事件，這時document就會捕捉img發出的error事件；

三、執行error事件的邏輯。