原地址:??https://juejin.im/post/5d3e4304f265da1b8608cee5
個人覺得很有用處? 所以記錄在自己的博客里? 留有后用
JS監聽圖片的 error 事件
<img id="img" src="http://xxx.xxx.xxx/img.png">
let img = document.getElementById('img');
img.addEventListener('error',function(e){
? ? e.target.src = '//xxx.xxx.xxx/default.png'; // 為當前圖片設定默認圖
})
這樣不利于處理大量圖片的情況
內聯方式監聽圖片的 error 事件
<img src="http://xxx.xxx.xxx/img.png" onerror="this.src = '//xxx.xxx.xxx/default.png'">
通過全局監聽 error 事件
window.addEventListener('error',function(e){
? ? // 當前異常是由圖片加載異常引起的
? ? if( e.target.tagName.toUpperCase() === 'IMG' ){
? ? ? ? e.target.src = '//xxx.xxx.xxx/default.jpg';
? ? }
},true)
當網絡環境很差的時候 可以設置一個計數器? 當達到期望次數? 改為提供一個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)
