В веб-разработке важно уметь правильно обрабатывать процесс загрузки изображений. Браузеру может потребоваться время на подгрузку файла, особенно при медленном соединении или больших изображениях. Задача разработчика — отслеживать статус загрузки изображения и реагировать на это: отображать спиннер, применять стили или инициализировать анимации.
Почему это важно
Ожидание загрузки без визуальной обратной связи может ухудшить пользовательский опыт. Вместо «мертвого» места лучше показывать, что изображение в процессе загрузки — например, с помощью анимации или CSS-класса.
Как отследить загрузку изображения с помощью JavaScript
Вы можете подписаться на событие load, которое срабатывает, когда изображение полностью загружено:
|
1 |
imgElm.addEventListener('load', () => { ... }); |
Однако важно учитывать, что если изображение уже загружено (например, из кэша), событие load может не произойти. Поэтому следует сначала проверить состояние изображения:
|
1 2 3 4 5 6 |
if (imgElm.complete) { // изображение уже загружено } else { // а тут можно прикрепить слушатель imgElm.addEventListener('load', () => { ... }); } |
Универсальный подход: обёртка в виде класса
Чтобы избежать повторения кода и централизовать логику обработки загрузки, удобно использовать вспомогательный JavaScript-класс:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
class ImageLoadingStatus { onLoading = null; onComplete = null; process(contenxElm) { const images = contenxElm.querySelectorAll('img'); images.forEach((imgElm) => { if (imgElm.complete) { ; } else { if (this.onLoading !== null) { this.onLoading(imgElm); } imgElm.addEventListener('load', () => { if (this.onComplete !== null) { this.onComplete(imgElm); } }); } }); } } |
Этот класс позволяет задать обработчики для состояний «загрузка началась» и «загрузка завершена».
Пример использования:
|
1 2 3 4 5 6 7 8 9 |
const imageManager = new ImageLoadingStatus(); imageManager.onLoading = (imgElm) => { $(imgElm).parents('.flipper').addClass('flipped'); } imageManager.onComplete = (imgElm) => { $(imgElm).parents('.flipper').removeClass('flipped'); } imageManager.process(document); |
В этом примере при старте загрузки изображений родительскому контейнеру с классом .flipper добавляется класс flipped. После завершения загрузки класс удаляется — это может быть использовано для анимаций или индикации процесса.
Заключение
Обработка событий загрузки изображений — важная часть создания отзывчивого и дружественного интерфейса. Использование класса-обёртки упрощает код и позволяет масштабировать решение под разные участки страницы. Не забывайте учитывать кэш браузера при работе с событием load, и предоставляйте пользователю визуальную обратную связь.