Опубликовано:

Ленивая загрузка в JavaScript

Источник: «Lazy Loading In JavaScript»
Ленивая загрузка — это метод, позволяющий отложить загрузку несущественного содержимого до того момента, когда оно станет необходимым для просмотра пользователем. В отличие от других методов загрузки, при которых все объекты сайта загружаются одновременно при доступе к странице, при ленивой загрузке используется более расчётливый подход. Она откладывает отображение некоторых элементов, таких как изображения, видео и другие мультимедиа, до тех пор, пока пользователь не начнёт активно взаимодействовать с веб-страницей. В этой статье мы расскажем вам, как использовать эту технологию, чтобы пользователи получали больше удовольствия от работы с вашим сайтом.

Введение

Пользователи Интернета предъявляют высокие требования к времени загрузки и производительности веб-сайтов. Медленная загрузка веб-сайтов может привести к увеличению числа отказов и появлению недовольных пользователей. Для решения этой проблемы разработчики постоянно ищут различные методы повышения скорости и улучшения общего впечатления пользователей, и одним из таких методов является ленивая загрузка. Для достижения ленивой загрузки разработчики используют JavaScript. С помощью JavaScript веб-разработчики могут управлять тем, когда и как определённые элементы будут получены с сервера и отображены на экране пользователя. В этой статье мы рассмотрим преимущества ленивой загрузки, способы её реализации, влияние на производительность, проблемы и лучшие практики.

Преимущества ленивой загрузки

Рассмотрим некоторые преимущества использования ленивой загрузки. К ним относятся:

Техники реализации ленивой загрузки в JavaScript

Ленивая загрузка в JavaScript может быть реализована различными методами. Но наиболее распространёнными являются два способа: использование API Intersection Observer для ленивой загрузки изображений и реализация ленивой загрузки содержимого по событию прокрутки. Давайте рассмотрим оба этих метода на примерах, чтобы понять, как они работают:

1. Ленивая загрузка изображений с использованием Intersection Observer API:

Intersection Observer API — это JavaScript API, позволяющий разработчикам наблюдать за изменениями в пересечении элемента с определённым предком или областью просмотра. Он отслеживает видимость целевых элементов и уведомляет разработчика, когда элемент пересекается или покидает область просмотра. Он идеально подходит для "ленивой" загрузки изображений, поскольку уведомляет нас, когда изображение входит или выходит из области просмотра, позволяя загружать его по мере необходимости. Он работает в отдельном потоке и не блокирует основной поток JavaScript. API не ограничивается только изображениями; его можно использовать для ленивой загрузки любого содержимого, например видео, iframe или даже генерируемых разделов страницы. Несколько Intersection Observers могут одновременно наблюдать за различными элементами на одной странице. Например, у вас есть страница с несколькими изображениями, и вы хотите лениво загружать эти изображения по мере того, как пользователи прокручивают страницу вниз. Вот как можно реализовать ленивую загрузку с помощью API Intersection Observer на ванильном JavaScript. Для начала убедитесь, что у вас есть базовая HTML-структура с тегами img, содержащими атрибут data-src, указывающий реальный URL-адрес источника изображения. Вместо обычного атрибута src мы будем использовать data-src для хранения URL-адреса изображения, которое будет загружаться лениво.

<!DOCTYPE html>
<html>
  <head>
    <title>Lazy Loading Images</title>
  </head>
  <body>
    <h1>Lazy Loading Images Example</h1>
    <img class="lazy" data-src="image1.jpg" alt="Image 1">
    <img class="lazy" data-src="image2.jpg" alt="Image 2">
    <!-- Добавьте дополнительные изображения с классом "lazy" и атрибутом "data-src" -->.
  </body>
</html>

В нашем JavaScript-коде мы создадим экземпляр наблюдателя Intersection Observer и укажем функцию обратного вызова, которая будет срабатывать всякий раз, когда наблюдаемый элемент входит или выходит из области просмотра.

// Получить все элементы с классом "lazy"
const lazyImages = document.querySelectorAll(".lazy");
// Создание нового Intersection Observer
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
// Загружаем изображение, когда оно попадает в область просмотра
      entry.target.src = entry.target.dataset.src;
      observer.unobserve(entry.target); // Удалить из наблюдения изображение после его загрузки
    }
  });
});
// Наблюдение за каждым ленивым изображением
lazyImages.forEach((image) => {
  observer.observe(image);
});

В приведённом выше коде сначала выделяются все элементы с классом lazy с помощью document.querySelectorAll(".lazy"). Затем мы создаём новый экземпляр Intersection Observer, передавая ему функцию обратного вызова, срабатывающую всякий раз, когда наблюдаемый элемент (в данном случае ленивые изображения) входит в область просмотра или выходит из неё. Когда изображение наблюдается и входит в область просмотра (т.е. entry.isIntersecting равен true), мы устанавливаем его атрибут src в значение data-src, которое содержит фактический URL изображения. Это действие запускает ленивую загрузку изображения. Затем мы вызываем observer.unobserve(entry.target), для прекращения наблюдения за изображением после его загрузки с целью оптимизации производительности.

2. Ленивая загрузка содержимого по Scroll Event:

Подход, основанный на событиях Scroll, позволяет реализовать ленивую загрузку с высокой степенью автоматизации. Вы полностью контролируете, когда и как загружается содержимое, что делает его подходящим для сценариев, в которых необходимо выполнять определённые задачи или переходы, когда элемент становится видимым. Событие Scroll — это свойство JavaScript, поддерживаемое всеми современными браузерами. Это позволяет не беспокоиться о проблемах совместимости. Для одностраничных приложений, где содержимое загружается по мере перемещения пользователей по сайту, использование события Scroll может быть более интуитивным. В отличие от API Intersection Observer, который лучше всего подходит для изображений и специфических элементов, ленивая загрузка на основе события Scroll обеспечивает большую гибкость. Её можно применять к любому содержимому или сложным компонентам, которые не вписываются в концепцию в поле зрения. Рассмотрим пример Здесь снова имеется базовая HTML-структура с элементами, подлежащими ленивой загрузке. Однако в этот раз нам не понадобятся специальные атрибуты типа data-src.

<!DOCTYPE html>
<html>
  <head>
    <title>Lazy Loading Content on Scroll</title>
  </head>
  <body>
    <h1>Lazy Loading Content Example</h1>
    <div class="lazy-content">
      <p>Some content to be lazily loaded...</p>
    </div>
    <div class="lazy-content">
      <p>More content to be lazily loaded...</p>
    </div>
    <!-- Добавьте больше элементов с классом "lazy-content" -->
  </body>
</html>

В нашем JavaScript-коде есть функция isElementInViewport(element), которая проверяет, находится ли элемент в области просмотра, затем определяется функция lazyLoadContent(), перебирающая все элементы с классом lazy-content с помощью document.querySelectorAll(".lazy-content").

// Функция для проверки того, находится ли элемент в области просмотра
function isElementInViewport(element) {
  const rect = element.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}
// Функция для ленивой загрузки содержимого
function lazyLoadContent() {
  const lazyContentElements = document.querySelectorAll(".lazy-content");
  lazyContentElements.forEach((element) => {
    if (isElementInViewport(element)) {
      // Добавьте сюда свою логику для загрузки содержимого элемента
      element.classList.add("loaded");
    }
  });
}
// Прикрепляем функцию lazyLoadContent к событию scroll
window.addEventListener("scroll", lazyLoadContent);
// Изначально вызываем функцию для загрузки видимого содержимого при загрузке страницы
lazyLoadContent();

Для каждого элемента проверяется, находится ли он в области просмотра с помощью функции isElementInViewport(element), и, если значение true, загружается содержимое этого элемента. В данном примере мы просто добавляем класс loaded к элементу, но вы можете настроить эту часть в соответствии с вашим сценарием использования. Затем мы привязываем функцию lazyLoadContent() к событию scroll с помощью window.addEventListener("scroll", lazyLoadContent). Это гарантирует, что функция будет вызываться каждый раз, когда пользователь прокручивает страницу. Кроме того, мы вызываем функцию lazyLoadContent() изначально, чтобы загрузить видимое содержимое при загрузке страницы.

Когда следует применять ленивую загрузку

Знание того, когда следует применять ленивую загрузку, очень важно для веб-разработчиков. Важно использовать её с умом, чтобы добиться максимальной эффективности и избежать возможных недостатков. Ленивая загрузка является обязательной оптимизацией для сайтов, в которых большое место занимают изображения, таких как онлайн-портфолио, платформы электронной коммерции и сайты, посвящённые фотографии. На таких сайтах часто размещается большое количество изображений высокого разрешения, что может существенно повлиять на время первоначальной загрузки страницы. При ленивой загрузке изображений первоначально загружаются только те изображения, которые находятся в области просмотра пользователя или в области над разворотом страницы. Веб-сайты, использующие бесконечную прокрутку или пагинацию для отображения большого объёма контента, могут извлечь выгоду из ленивой загрузки. Страницы с интерактивными элементами и виджетами, такими как слайдеры, карусели и аккордеоны, также могут воспользоваться преимуществами ленивой загрузки. Длинные статьи или посты в блогах, занимающие несколько страниц, также могут воспользоваться преимуществами ленивой загрузки. Вместо того чтобы предварительно загружать все страницы, ленивая загрузка может получить и загрузить последующие страницы только тогда, когда пользователь прокрутит страницу до конца. Сайты с ресурсоёмкими функциями, такими как интерактивные карты, визуализация данных и сложная анимация, могут использовать ленивую загрузку для оптимизации своей производительности.

Проблемы, связанные с ленивой загрузкой

Несмотря на то, что ленивая загрузка в JavaScript повышает производительность веб-сайтов, она не лишена своих проблем. К числу проблем, связанных с ленивой загрузкой, относятся:

Лучшие практики

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

Заключение

Ленивая загрузка — это способ ускорить и упростить работу с веб-сайтами. Она работает по принципу ожидания загрузки неважных элементов до тех пор, пока они не понадобятся. Это означает, что страница отображается быстрее и используется меньше данных. Совместимость браузеров — ещё один момент при реализации ленивой загрузки в JavaScript. В то время как многие современные браузеры поддерживают необходимые функции и API для ленивой загрузки, старые браузеры могут не поддерживать её или иметь ограниченную функциональность. Поэтому разработчики должны помнить о том, какие браузеры они хотят поддерживать, и в соответствии с этим выбирать подходящие методы. В данной статье мы рассмотрели преимущества, методы, проблемы и лучшие практики ленивой загрузки, проливая свет на её возможности в современной веб-разработке.

Предыдущая Статья

Рефакторинг CSS: Оптимизация размера и производительности (часть 3)

Следующая Статья

Понимание сериализации в PHP