Как изящно обрабатывать исключения изображений в «Advanced Front-end»

JavaScript
Как изящно обрабатывать исключения изображений в «Advanced Front-end»

Чем больше вы знаете, тем больше вы не знаете
点赞Посмотри еще раз, аромат остался в руке, и слава

Введение

В нашей реальной работе неизбежно загружать большое количество изображений на страницу, но изображения могут не отображаться нормально из-за проблем с сетью или отсутствия файлов изображений.

Мы хотели бы иметь способ понизить версию, чтобы отображать изображение по умолчанию, которое мы предварительно установили после того, как изображение не загружается.

Слушайте событие ошибки изображения

Поскольку после того, как изображение не загрузится, будет вызвано событие ошибки, мы можем понизить версию изображения, прослушивая событие ошибки.

<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, и отслеживается событие ошибки, что неприменимо в случае большого количества картинок

Для этого мы можем использовать встроенные события для прослушивания события ошибки.

<img src="//xxx.xxx.xxx/img.png" onerror="this.src = '//xxx.xxx.xxx/default.png'">

Мы видим, что нет необходимости писать JS-мониторинг отдельно, мы реализовали деградационную обработку ненормальных картинок.

Но этот метод недостаточно хорош, потому что нам все еще нужно вручную добавлять встроенные события в тег img, В реальном процессе разработки трудно гарантировать, что каждое изображение не будет пропущено.

Итак, давайте подумаем, возможно ли понизить качество аномальных изображений путем глобального прослушивания без записи встроенных событий.

глобальный мониторинг

Мы хотим иметь возможность прослушивать событие ошибки глобально. Прежде чем реализовать его, давайте посмотрим на поток событий в браузере.

События уровня DOM2 указывают, что поток событий состоит из трех фаз:

  • фаза захвата событий
  • на целевой стадии
  • фаза всплытия события

Сначала происходит захват событий, что дает возможность перехватывать события. Затем идут события, полученные фактической целью. Последняя стадия – стадия бульканья.

Событие ошибки самого изображения прослушивания в приведенном выше примере фактически находится на целевом этапе в потоке событий.

Для события ошибки img оно не может всплывать, но может быть перехвачено.Наша реализация выглядит следующим образом:

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)

Рекомендуемая серия статей

напиши в конце

  • Если в статье есть ошибки, исправьте их в комментариях, если статья вам поможет, добро пожаловать点赞а также关注
  • Эта статья была впервые опубликована одновременно сgithub, доступны наgithubНайдите больше отличных статей вWatch & Star ★
  • Для последующих статей см.:строить планы

Добро пожаловать в публичный аккаунт WeChat【前端小黑屋】, 1–3 высококачественные высококачественные статьи публикуются каждую неделю, чтобы помочь вам в продвижении вперед.

Категории