jQuery: как реализовать ленивую загрузку изображений

Пройдите тест, узнайте какой профессии подходите

Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

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

Если вам необходимо, чтобы ваши изображения загружались только тогда, когда пользователь до них доскролливает, воспользуйтесь механизмом "ленивой" загрузки. Для этого достаточно добавить атрибут loading="lazy" к тегу <img>:

HTML
Скопировать код
<img src="your-image.jpg" loading="lazy" alt="описание">

Если вам требуется решение, пригодное для всех браузеров, можно использовать API Intersection Observer. Он слежение за появлением изображений в поле зрения и загружает их в этот момент:

JS
Скопировать код
let observer = new Intersection Observer((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      let img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

document.querySelectorAll('img[lazy]').forEach(img => observer.observe(img));

В разметке HTML изначальный URL-адрес изображения следует заменить на data-src и добавить атрибут lazy:

HTML
Скопировать код
<img data-src="your-image.jpg" alt="описание" lazy>

При этом JavaScript отвечает за контролирование загрузки и заменяет data-src на src в нужный момент.

Кинга Идем в IT: пошаговый план для смены профессии

Оптимизация изображений для ускорения их загрузки

Прежде чем приступить к использованию "ленивой" загрузки, оптимизируйте ваши изображения. Уменьшите их размер и преобразуйте в более эффективный формат, например, в WebP, для ускорения процесса загрузки:

HTML
Скопировать код
<img data-src="your-image.webp" alt="описание" lazy>

Оптимальное решение — использование адаптивных изображений с атрибутами srcset и sizes. Это позволит устройствам выбирать изображения в соответствии с их разрешением:

HTML
Скопировать код
<img 
  data-srcset="your-image-300w.jpg 300w, your-image-600w.jpg 600w"
  sizes="(max-width: 600px) 300px, 600px"
  data-src="your-image-600w.jpg"
  alt="описание"
  lazy>

Замещающие фоновые изображения: путь к плавной прокрутке

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

CSS
Скопировать код
img[lazy] {
  background: #ccc; // Минимализм
  background: url('placeholder.jpg'); // Или возможно размытое изображение-заполнитель?
}

Совместимость со старыми браузерами

Если вы стремитесь к совместимости с устаревшими браузерами, где "ленивая" загрузка недоступна, воспользуйтесь Полифиллом или альтернативными сценариями JavaScript, которые можно легко найти или написать самостоятельно.

Ленивая загрузка: множество плагинов и подходов

  • jQuery Lazyload: отлично интегрируется в проекты на jQuery.
  • Intersection Observer и пороговые значения: начинает загрузку изображений, когда они приближаются к видимой области экрана.
  • Динамическое содержимое и AJAX: поддерживайте "ленивую" загрузку в динамически генерируемом контенте.

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

На примере ниже видно, как происходит процесс на странице:

Markdown
Скопировать код
🔲 🔲 🔲 // Изображения в очереди загрузки
👀🚶‍♀️

Когда пользователь прокручивает страницу:

Markdown
Скопировать код
🏞 🔲 🔲 // Загружено первое изображение
👀🚶‍♀️

И далее, при продолжении прокрутки:

Markdown
Скопировать код
🏞 🌇 🌉 // Изображения появляются по мере просмотра
👀🚶‍♀️

Таким образом, "ленивая" загрузка оптимизирует процесс просмотра.

👣 Каждый шаг символизирует одно действие прокрутки. 🖼 Квадратик отражает загружаемое изображение. 👀 Обозначение поля зрения пользователя.

Необходимость учета определенных факторов при разработке

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

JS
Скопировать код
// Регистрация сервис-воркера
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
  // Сервис-воркер 'sw.js' готов к эксплуатации!
}

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

Избегайте одновременной загрузки всех изображений

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

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

  1. Атрибут loading для ленивой загрузки – MDN
  2. Ленивая загрузка изображений на web.dev
  3. Быстрые времена загрузки на web.dev
  4. Адаптивные изображения – MDN
  5. lozad.js на GitHub
  6. Понимание Promises и Async/Await
  7. jQuery Lazy Plugin
Проверь как ты усвоил материалы статьи
Пройди тест и узнай насколько ты лучше других читателей
Какой атрибут нужно добавить к тегу <img> для реализации ленивой загрузки изображений?
1 / 5