40. Lazy Loading

HTML: Скелет - Lazy Loading

Lazy Loading, или “ленивая загрузка”, - это техника оптимизации веб-страниц, позволяющая загружать изображения и другие ресурсы только тогда, когда они становятся видны пользователю. Это значительно улучшает производительность сайта, особенно если на странице много изображений.

Что такое Lazy Loading?

Представьте, что у вас на сайте длинная страница с множеством изображений. Без lazy loading браузер пытается загрузить все эти изображения сразу, даже те, которые находятся в самом низу страницы и пока не видны пользователю. Lazy loading позволяет отложить загрузку этих невидимых изображений до тех пор, пока пользователь не прокрутит страницу вниз и они не окажутся в области видимости.

Как это работает в HTML?

В HTML lazy loading реализуется с помощью атрибута loading у тегов <img> и <iframe>. Атрибут loading может принимать три значения:

lazy: Изображение будет загружено только тогда, когда оно окажется в области видимости.
eager: Изображение будет загружено сразу (поведение по умолчанию).
auto: Браузер сам решает, когда загрузить изображение (тоже поведение по умолчанию).

Пример:

<img src="image1.jpg" alt="Описание изображения 1" loading="lazy">
<img src="image2.jpg" alt="Описание изображения 2" loading="lazy">
<img src="image3.jpg" alt="Описание изображения 3" loading="lazy">

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

Практические примеры кода

Простейший пример:

<!DOCTYPE html>
<html>
<head>
  <title>Lazy Loading Example</title>
</head>
<body>

  <h1>Lazy Loading Example</h1>

  <img src="image1.jpg" alt="Image 1" loading="lazy" width="500">
  <img src="image2.jpg" alt="Image 2" loading="lazy" width="500">
  <img src="image3.jpg" alt="Image 3" loading="lazy" width="500">

  <p>Прокрутите страницу вниз, чтобы увидеть, как загружаются изображения.</p>

</body>
</html>

Пример с placeholder:

Чтобы пользователь не видел пустые места, пока изображение загружается, можно использовать placeholder (заглушку):

<!DOCTYPE html>
<html>
<head>
  <title>Lazy Loading Example with Placeholder</title>
  <style>
    .image-container {
      width: 500px;
      height: 300px; /* Задайте высоту, чтобы placeholder был виден */
      background-color: #eee; /* Цвет placeholder */
      margin-bottom: 20px;
    }

    .image-container img {
      width: 100%;
      height: 100%;
      object-fit: cover; /* Чтобы изображение заполняло контейнер */
    }
  </style>
</head>
<body>

  <h1>Lazy Loading Example with Placeholder</h1>

  <div class="image-container">
    <img src="image1.jpg" alt="Image 1" loading="lazy">
  </div>

  <div class="image-container">
    <img src="image2.jpg" alt="Image 2" loading="lazy">
  </div>

  <div class="image-container">
    <img src="image3.jpg" alt="Image 3" loading="lazy">
  </div>

  <p>Прокрутите страницу вниз, чтобы увидеть, как загружаются изображения.</p>

</body>
</html>

В этом примере мы используем CSS для создания placeholder в виде серого прямоугольника.

Жизненный пример

Lazy loading активно используется на многих сайтах и платформах:

Социальные сети (Facebook, Instagram, Twitter): Они используют lazy loading для загрузки изображений и видео в ленте новостей. Это позволяет быстро загружать начальную часть ленты и избежать загрузки огромного количества контента, который пользователь еще не видит.
Интернет-магазины (Amazon, AliExpress): Lazy loading используется на страницах категорий и в результатах поиска для отображения большого количества товаров.
Блоговые платформы (Medium, WordPress): Для оптимизации загрузки длинных статей с множеством изображений.
Фреймворки и библиотеки: Многие JavaScript фреймворки (React, Vue, Angular) и библиотеки (например, lazysizes) предоставляют компоненты и инструменты для реализации lazy loading.

Ключевые моменты

Lazy loading улучшает производительность сайта, особенно на страницах с большим количеством изображений.
Используйте атрибут loading="lazy" для тегов <img> и <iframe>.
Рассмотрите возможность использования placeholder для улучшения пользовательского опыта.
Lazy loading поддерживается большинством современных браузеров.
Существуют JavaScript библиотеки для более продвинутой реализации lazy loading.