JavaScript Academy · Урок

Ленивая загрузка изображений

Загружайте изображения только при их появлении.

«Ленивая загрузка изображений» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.

Идея отложенной загрузки

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

Сохранение настоящего URL

Суть приёма в том, чтобы изначально не помещать настоящий URL изображения в src. Сохраните его в атрибуте data-src, чтобы браузер пока не скачивал изображение.

// Markup pattern:
// <img data-src="photo-large.jpg" alt="Scenery">
// The browser will not fetch anything until we set src.

Выбор изображений с отложенной загрузкой

Соберите все изображения, для которых нужна отложенная загрузка. Обычно для этого используют общий класс или наличие атрибута data-src.

const lazyImages = document.querySelectorAll('img[data-src]');
console.log('found', lazyImages.length, 'lazy images');

Создание observer

Создайте observer, функция обратного вызова которого загружает настоящее изображение после его пересечения с областью просмотра. Используйте rootMargin, чтобы изображение начинало загружаться немного раньше своего появления.

const observer = new IntersectionObserver((entries, obs) => {
  // handle entries here
}, { rootMargin: '100px' });

Загрузка при пересечении

Когда изображение пересекается с областью просмотра, скопируйте его data-src в src. После этого браузер скачает и отобразит изображение.

const observer = new IntersectionObserver((entries, obs) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src; // triggers the download
    }
  });
}, { rootMargin: '100px' });

Прекращение наблюдения после загрузки

После загрузки изображение больше не нужно отслеживать. Вызовите unobserve, чтобы освободить ресурсы и предотвратить повторные срабатывания.

if (entry.isIntersecting) {
  const img = entry.target;
  img.src = img.dataset.src;
  obs.unobserve(img); // done watching this one
}

Начало наблюдения

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

lazyImages.forEach(img => observer.observe(img));

Отображение заполнителя

Сделайте взаимодействие плавным: показывайте небольшой размытый заполнитель или сплошной цвет, пока загружается настоящее изображение, а затем плавно отобразите его в событии load изображения.

img.addEventListener('load', () => {
  img.classList.add('loaded'); // CSS can fade it in
});
img.src = img.dataset.src;

Атрибут loading

Современные браузеры также поддерживают встроенную отложенную загрузку с помощью loading="lazy" у элементов img и iframe. Intersection Observer по-прежнему полезен для пользовательского управления, анимаций или резервной логики.

// Native approach (no JS needed):
// <img src="photo.jpg" loading="lazy" alt="...">

// Observer approach gives more control and effects.

Очистка атрибута источника изображения

После загрузки можно удалить атрибут data-src, чтобы сохранить DOM в порядке и избежать путаницы в последующем коде или запросах.

img.src = img.dataset.src;
img.removeAttribute('data-src');
obs.unobserve(img);

Полный шаблон

Отложенная загрузка с помощью наблюдения за пересечениями — аккуратный и эффективный шаблон: сохраняйте URL в data-src, наблюдайте за каждым изображением, подставляйте настоящий URL при пересечении, а затем прекращайте наблюдение. В результате страница загружается быстрее, а изображения появляются именно тогда, когда это нужно.

Быстрая проверка

Проверьте, насколько хорошо вы поняли отложенную загрузку изображений.

Повторение

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

Сохраняйте настоящий URL в data-src.
Наблюдайте за каждым изображением с помощью observer.
При пересечении копируйте data-src в src и вызывайте unobserve.
Используйте rootMargin, чтобы предварительно загружать изображение прямо перед появлением.
Встроенный атрибут loading="lazy" — более простой вариант.

Далее мы реализуем бесконечную прокрутку.

Часто задаваемые вопросы

Урок «Ленивая загрузка изображений» бесплатный?

Да — полный текст урока «Ленивая загрузка изображений» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Ленивая загрузка изображений»?

Загружайте изображения только при их появлении. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать JavaScript Academy?

Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Ленивая загрузка изображений»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к JavaScript Academy