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

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

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

<img src="your-image.jpg" loading="lazy" alt="описание">

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

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:

<img data-src="your-image.jpg" alt="описание" lazy>

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

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

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

<img data-src="your-image.webp" alt="описание" lazy>

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

<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>

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

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

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

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

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

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

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

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

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

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

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

🏞 🔲 🔲 // Загружено первое изображение
👀🚶‍♀️

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

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

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

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

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

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

// Регистрация сервис-воркера
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