圖片加載失敗的前端解決方案

來源 |?www.fly63.com

解決方案

<img src="http://fly63.com/img.png" onerror="this.src = '//fly63.com/default.png'">

但是這樣呢也會存在一些問題，比如：

1.我們需要手動的向 img 標簽中添加內(nèi)聯(lián)事件，在實際開發(fā)過程中，很難保證每張圖片都不漏寫。
2.因為圖片加載失敗進入默認圖，那么默認圖再加載失敗怎么辦呢？

優(yōu)化方案一：

我們可以通過在全局監(jiān)聽的方式，來對異常圖片做降級處理，這樣不用在每個img標簽中不用onerror事件。

監(jiān)聽圖片自身的 error 事件，實際上在事件流中是處于目標階段。對于 img 的 error 事件來說，是無法冒泡的，但是是可以捕獲的，我們的實現(xiàn)如下:

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

最后，我們在思考一個問題，當網(wǎng)絡出現(xiàn)異常的時候，必然會出現(xiàn)什么網(wǎng)絡圖片都無法加載的情況，這樣就會導致我們監(jiān)聽的 error 事件。

被無限觸發(fā)，所以我們可以設定一個計數(shù)器，當達到期望的錯誤次數(shù)時停止對圖片賦予默認圖片的操作，改為提供一個Base64的圖片。

實現(xiàn)起來也很簡單，如下：

window.addEventListener('error',function(e){    let target = e.target, // 當前dom節(jié)點        tagName = target.tagName,        count = Number(target.dataset.count ) || 0, // 以失敗的次數(shù)，默認為0        max= 3; // 總失敗次數(shù)，此時設定為3    // 當前異常是由圖片加載異常引起的    if( tagName.toUpperCase() === 'IMG' ){        if(count >= max){            target.src = 'data:image/jpeg;base64*******';//base64圖片字符串        }else{            target.dataset.count = count + 1;            target.src = '//xxx/default.jpg';        }    }},true)

優(yōu)化方案二：

如果我們不需要全局監(jiān)聽error事件，仍然想用onerror事件，如何保證不進入死循環(huán)呢？代碼如下：

<img src="http://fly63.com/img.png" onerror="nofind()"/><script type="text/JavaScript">      function nofind(){          var img=event.srcElement || event.target ; //獲取img對象，火狐是event.target ，IE及谷歌其他是event.srcElement         img.src="http://fly63.com/default.png";         img.onerror=null;       }</script>

學習更多技能

請點擊下方公眾號