Обработка ошибок загрузки

Featherlight — лёгкая библиотека для создания модальных окон на JavaScript, поддерживающая работу с различными типами контента: HTML, изображениями, AJAX и iframe. При работе с внешними ресурсами часто возникает необходимость корректной обработки ошибок загрузки. Неправильное управление ошибками может привести к нарушению пользовательского опыта и некорректному отображению контента.

Ошибки при загрузке изображений

Для модальных окон с изображениями ключевой момент — корректное определение момента, когда изображение не может быть загружено. Featherlight использует стандартные HTML-элементы <img> для отображения изображений, поэтому обработка ошибок происходит через событие error на изображении:

$.featherlight({
    iframe: 'https://example.com/image.jpg',
    afterContent: function() {
        var img = this.$content.find('img');
        img.on('error', function() {
            img.replaceWith('<div class="featherlight-error">Не удалось загрузить изображение</div>');
        });
    }
});

Пояснение:

  • afterContent вызывается после вставки контента в модальное окно.
  • Событие error позволяет отследить невозможность загрузки изображения.
  • Замена элемента <img> на кастомный блок предотвращает пустое окно.

Ошибки при загрузке контента через AJAX

Featherlight поддерживает загрузку контента по URL через AJAX, используя опцию ajax. Для обработки ошибок необходимо использовать объект jqXHR в сочетании с методами fail или always:

$.featherlight({
    ajax: 'https://example.com/content.html',
    afterContent: function() {
        var fl = this;
        $.ajax(fl.ajax)
            .done(function(data) {
                fl.$content.html(data);
            })
            .fail(function(jqXHR, textStatus, errorThrown) {
                fl.$content.html('<div class="featherlight-error">Ошибка загрузки контента: ' + textStatus + '</div>');
            });
    }
});

Особенности:

  • fail срабатывает при любых сетевых ошибках, включая 404 и 500.
  • В afterContent можно изменить содержимое модального окна, сохраняя возможность закрытия.
  • Использование fl.$content обеспечивает работу с текущим экземпляром Featherlight.

Ошибки при работе с iframe

При загрузке iframe возникают специфические ограничения: события загрузки и ошибки не всегда доступны из-за политики безопасности (CORS). Для отслеживания состояния можно использовать комбинацию событий load и таймаутов:

$.featherlight({
    iframe: 'https://example.com/page.html',
    afterContent: function() {
        var iframe = this.$content.find('iframe');
        var fl = this;
        var timeout = setTimeout(function() {
            iframe.replaceWith('<div class="featherlight-error">Не удалось загрузить страницу</div>');
        }, 10000); // 10 секунд ожидания

        iframe.on('load', function() {
            clearTimeout(timeout);
        });
    }
});

Особенности:

  • Событие load срабатывает при успешной загрузке.
  • Таймаут предотвращает бесконечное ожидание при недоступности ресурса.
  • Для внешних доменов прямое отслеживание ошибок через onerror невозможно из-за ограничений CORS.

Глобальная обработка ошибок

Featherlight позволяет задавать глобальные настройки для всех модальных окон через расширение прототипа:

$.extend($.featherlight.defaults, {
    afterContent: function() {
        var content = this.$content;
        content.find('img').on('error', function() {
            $(this).replaceWith('<div class="featherlight-error">Ошибка загрузки изображения</div>');
        });
        var iframe = content.find('iframe');
        if (iframe.length) {
            var fl = this;
            var timeout = setTimeout(function() {
                iframe.replaceWith('<div class="featherlight-error">Не удалось загрузить страницу</div>');
            }, 10000);
            iframe.on('load', function() {
                clearTimeout(timeout);
            });
        }
    }
});

Преимущества глобального подхода:

  • Единая точка обработки ошибок.
  • Минимизация дублирования кода для разных модальных окон.
  • Простое добавление кастомной логики для отображения сообщений.

Стиль и визуальное оформление ошибок

Для повышения UX ошибки загрузки следует визуально выделять:

.featherlight-error {
    color: #fff;
    background-color: #e74c3c;
    padding: 20px;
    text-align: center;
    font-weight: bold;
}

Рекомендации:

  • Цвет и размер текста должны выделять сообщение на фоне контента.
  • Сообщения должны быть краткими, но информативными.
  • Возможность закрытия окна должна оставаться доступной независимо от ошибки.

Отладка и логирование

Для детальной диагностики проблем загрузки полезно использовать консоль:

img.on('error', function(e) {
    console.error('Featherlight: ошибка загрузки изображения', e.target.src);
});
$.ajax(...).fail(function(jqXHR, textStatus, errorThrown) {
    console.error('Featherlight: ошибка AJAX', textStatus, errorThrown);
});

Такой подход помогает быстро идентифицировать проблемные URL и корректно настраивать серверные и клиентские ресурсы.

Итоговые рекомендации по обработке ошибок

  • Для изображений — событие error.
  • Для AJAX — методы fail и done.
  • Для iframe — сочетание события load и таймаутов.
  • Использовать глобальные настройки Featherlight для единообразной обработки.
  • Добавлять визуальные уведомления и логирование для упрощения диагностики.

Эффективная обработка ошибок в Featherlight гарантирует корректное отображение модальных окон и предотвращает негативное влияние на пользовательский опыт.

Оглавление