「前端進階」如何優雅的處理圖片異常

時間 2019-11-05

標籤前端進階如何優雅處理圖片異常简体版

原文原文鏈接

引子

在咱們的實際工做中，不可避免的會在頁面中加載大量圖片，但可能因爲網絡問題，或者圖片文件缺失等問題，致使圖片不能正常展現javascript

咱們但願有一種降級處理的方式，能夠在圖片加載失敗後顯示一張咱們預先設定好的默認圖片html

監聽圖片的 error 事件

因爲圖片加載失敗後，會拋出一個 error 事件，咱們能夠經過監聽 error 事件的方式來對圖片進行降級處理前端

<img id="img" src="//xxx.xxx.xxx/img.png">
複製代碼

let img = document.getElementById('img');
img.addEventListener('error',function(e){
    e.target.src = '//xxx.xxx.xxx/default.png'; // 爲當前圖片設定默認圖
})
複製代碼

這種方式，確實實現了對異常圖片的降級處理，但每張圖片都須要經過 JS 進行獲取，而且監聽 error 事件，對於大量圖片的狀況並不適用java

爲此，咱們能夠使用內聯事件來監聽 error 事件git

<img src="//xxx.xxx.xxx/img.png" onerror="this.src = '//xxx.xxx.xxx/default.png'">
複製代碼

咱們能夠看到，徹底不須要單獨去寫 JS 的監聽，咱們就實現了異常圖片的降級處理github

但這種方式還不夠好，由於咱們仍然須要手動的向 img 標籤中添加內聯事件，在實際開發過程當中，很難保證每張圖片都不漏寫瀏覽器

那麼咱們思考，是否能夠不寫內聯事件，經過在全局監聽的方式，來對異常圖片作降級處理呢微信

全局監聽

咱們但願的是，可以在全局監聽 error 事件，在實際實現以前，先來看一下瀏覽器中的事件流網絡

DOM2級事件規定事件流包含三個階段：dom

事件捕獲階段
處於目標階段
事件冒泡階段

首先發生的是事件捕獲，爲截獲事件提供了機會。而後是實際的目標接收到的事件。最後一個階段是冒泡階段。

咱們上文中的監聽圖片自身的 error 事件，實際上在事件流中是處於目標階段。

對於 img 的 error 事件來講，是沒法冒泡的，可是是能夠捕獲的，咱們的實現以下:

window.addEventListener('error',function(e){
    // 當前異常是由圖片加載異常引發的
    if( e.target.tagName.toUpperCase() === 'IMG' ){
        e.target.src = '//xxx.xxx.xxx/default.jpg';
    }
},true)
複製代碼

最後，咱們在思考一個問題，當網絡出現異常的時候，必然會出現什麼網絡圖片都沒法加載的狀況，這樣就會致使咱們監聽的 error 事件被無限觸發，因此咱們能夠設定一個計數器，當達到指望的錯誤次數時中止對圖片賦予默認圖片的操做，改成提供一個Base64的圖片

實現起來也很簡單，以下：

window.addEventListener('error',function(e){
    let target = e.target, // 當前dom節點
        tagName = target.tagName,
        times = Number(target.dataset.times) || 0, // 以失敗的次數，默認爲0
        allTimes = 3; // 總失敗次數，此時設定爲3
    // 當前異常是由圖片加載異常引發的
    if( tagName.toUpperCase() === 'IMG' ){
        if(times >= allTimes){
            target.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
        }else{
            target.dataset.times = times + 1;
            target.src = '//xxx.xxx.xxx/default.jpg';
        }
    }
},true)
複製代碼