Проверка загрузки или наличия ошибок в изображению jQuery

Быстрый ответ

Чтобы следить за процессом загрузки изображений в jQuery, используйте метод .on():

$('img.selector').on('load', function() {
  // Ура, изображение успешно загрузилось.
}).on('error', function() {
  // Ой, изображение не удалось загрузить.
});

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

Дополнительная проверка статуса загрузки изображений с использованием свойств natural и img.complete

Свойство img.complete может быть полезно для проверки статуса изображения после того, как страница загрузилась. Однако, оно вернёт true даже в случае, если изображение загружено неправильно. Чтобы контролировать эту ситуацию, обратите внимание на такие свойства как naturalWidth и naturalHeight, которые будут иметь ненулевые значения только в случае успешной загрузки изображения.

function isImageOk(imgElement) {
  // Вернет true, если изображение было корректно загружено.
  return imgElement.complete && imgElement.naturalHeight !== 0;
}

Функция возвращает true, если изображение было загружено без ошибок.

Неожиданные моменты: обработка ошибок перед регистрацией событий

Для корректной обработки ошибок, которые возникли до того, как были установлены обработчики событий с помощью jQuery, воспользуйтесь подходом с созданием изображения в памяти и заданием обработчиков onerror и onload:

var testImage = new Image();
testImage.onerror = function() {
  // Ошибка при загрузке изображения.
};
testImage.onload = function() {
  // Успешная загрузка изображения.
};
testImage.src = 'path/to/image.jpg';

Этот подход позволяет оперативно обнаружить и устранить ошибку.

Альтернативный вариант: библиотека imagesLoaded

Если вы предпочитаете использовать специализированные решения для отслеживания загрузки изображений, обратите внимание на библиотеку imagesLoaded. Это надёжное средство контроля за процессом загрузки, поддерживающее множество браузеров. Библиотеку можно применять как плагин для jQuery или используя нативный JavaScript. Подробности указаны в документации к библиотеке.

Работа с jQuery для изображений, добавленных динамически

При организации обработки событий для динамически добавляемых изображений могут возникнуть сложности. В таких случаях стоит использовать делегирование событий с помощью метода .on(), привязав их к родительскому элементу, который уже присутствовал на странице:

$(document).on('load', 'img.dynamic', function() {
  // Динамически добавленное изображение успешно загрузилось.
}).on('error', 'img.dynamic', function() {
  // Ошибка при загрузке динамически добавленного изображения.
});

Визуализация

Веб-страницу можно представить как поезд (🚂), каждое изображение на ней — это вагон (🚃). Наша задача — следить за тем, как эти вагоны загружаются.

$("img").on("load", function() {
  // 🚃✅ Вагон-изображение успешно отправился в путь.
}).on("error", function() {
  // 🚃❌ Вагон-изображение сломался и не может продолжать путь.
});

Каждый вагон передаёт сигнал об успешной отправке в путь (✅) или о возникновении проблемы (❌).

Полезные материалы

1. Событие load | Документация по jQuery API
2. Предварительная загрузка изображений с помощью jQuery – Ответы на стеке вопросов Stack Overflow
3. Свойство complete элемента HTMLImageElement – Документация Веб-API | MDN
4. Как проверить успешность загрузки изображения (без ошибок) с помощью jQuery – Вопросы на Stack Overflow
5. Событие image.onload и кэш браузера – Вопросы на Stack Overflow
6. Делегирование событий с MooTools, Dojo и jQuery
7. Справочник по методам событий jQuery