Ленивая загрузка изображений: Тренажер JavaScript: Покоряем HTML DOM

Тренажер по работе с HTML DOM на JavaScript для пользователей с начальным и средним уровнем подготовки.

В этом тренажере вы попрактикуетесь в реализации ленивой загрузки изображений (lazy loading) с использованием JavaScript и HTML. Ленивая загрузка позволяет отложить загрузку изображений, которые находятся за пределами видимой области экрана, до тех пор, пока пользователь не прокрутит страницу до них. Это значительно ускоряет начальную загрузку страницы и экономит трафик. Вам предстоит работать с Intersection Observer API, атрибутами `data-src` и стандартными атрибутами изображений. Задания охватывают различные аспекты ленивой загрузки, от базовой реализации до обработки ошибок и добавления эффектов.

Список тем

Базовая ленивая загрузка

Реализуйте простейшую ленивую загрузку для одного изображения. Вам дан HTML с изображением, у которого вместо атрибута `src` используется атрибут `data-src` с URL изображения. Ваша задача - написать JavaScript код, который при загрузке страницы заменит `data-src` на `src`, тем самым инициируя загрузку изображения.

HTML

Восстановить HTML

                      <img data-src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Image 1">

<img data-src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Image 1">

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const img = document.input__1('img');
  img.input__2('src', img.input__3('data-src'));
});

                     document.addEventListener('DOMContentLoaded', function() {
  const img = document.input__1('img');
  img.input__2('src', img.input__3('data-src'));
});

Используйте `querySelector` для выбора изображения и метод `setAttribute` для изменения атрибута `data-src` на `src`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Ленивая загрузка с Intersection Observer

Используйте Intersection Observer API для отслеживания появления изображений в области видимости. Вам дан HTML с несколькими изображениями, у которых есть атрибут `data-src`. Напишите JavaScript код, который будет наблюдать за появлением изображений в области видимости и загружать их, меняя `data-src` на `src`.

CSS

body { height:200px;} 
 img { display: block; margin-bottom: 20px; width: 300px; height: 300px; }

HTML

Восстановить HTML

                      <img data-src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Image 1">
<img data-src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike-300x300.png" alt="Image 2">
<img data-src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike3-300x300.png" alt="Image 3">

<img data-src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Image 1">
<img data-src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike-300x300.png" alt="Image 2">
<img data-src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike3-300x300.png" alt="Image 3">

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const images = document.querySelectorAll('img');

  const observer = new input__1((entries, observer) => {
    entries.forEach(entry => {
      if (input__2) {
        const img = entry.target;
        img.src = img.dataset.src;
        input__3.unobserve(img);
      }
    });
  });

  images.forEach(image => {
    observer.input__4(image);
  });
});

                     document.addEventListener('DOMContentLoaded', function() {
  const images = document.querySelectorAll('img');

  const observer = new input__1((entries, observer) => {
    entries.forEach(entry => {
      if (input__2) {
        const img = entry.target;
        img.src = img.dataset.src;
        input__3.unobserve(img);
      }
    });
  });

  images.forEach(image => {
    observer.input__4(image);
  });
});

Создайте экземпляр `IntersectionObserver`. В callback-функции проверяйте `isIntersecting`. Если элемент видим, меняйте `data-src` на `src` и прекращайте наблюдение за элементом.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Добавление placeholder

Добавьте placeholder (заполнитель) для изображений на время, пока они загружаются. Placeholder может быть, например, одноцветным фоном или полупрозрачным изображением. Измените JavaScript код из предыдущего задания так, чтобы перед загрузкой изображения отображался placeholder.

CSS

body { height:200px;} 
 img { display: block; margin-bottom: 20px; width: 300px; height: 300px; background-color: #f0f0f0; /* Placeholder background */ }

HTML

Восстановить HTML

                      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Image 1">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike-300x300.png" alt="Image 2">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike3-300x300.png" alt="Image 3">

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Image 1">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike-300x300.png" alt="Image 2">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike3-300x300.png" alt="Image 3">

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const images = document.querySelectorAll('img');

  const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        img.onload = () => {
          input__1;
        }
        observer.unobserve(img);
      }
    });
  });

  images.forEach(image => {
    observer.observe(image);
  });
});

                     document.addEventListener('DOMContentLoaded', function() {
  const images = document.querySelectorAll('img');

  const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        img.onload = () => {
          input__1;
        }
        observer.unobserve(img);
      }
    });
  });

  images.forEach(image => {
    observer.observe(image);
  });
});

Добавьте в HTML для каждого изображения атрибут `src` с URL placeholder-изображения. В JavaScript коде после замены `data-src` на `src` удаляйте placeholder.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Обработка ошибок загрузки

Добавьте обработку ошибок при загрузке изображений. Если изображение не загрузилось, покажите вместо него другое изображение или сообщение об ошибке.

CSS

body { height:200px;} 
 img { display: block; margin-bottom: 20px; width: 300px; height: 300px; }

HTML

Восстановить HTML

                      <img data-src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Image 1">
<img data-src="https://invalid-url.com/image.png" alt="Image 2">
<img data-src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike3-300x300.png" alt="Image 3">

<img data-src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Image 1">
<img data-src="https://invalid-url.com/image.png" alt="Image 2">
<img data-src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike3-300x300.png" alt="Image 3">

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const images = document.querySelectorAll('img');

  const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        img.onerror = () => {
          img.input__1 = "https://naytikurs.ru/assets/uploads/2025/03/naskolko-vas-legko-obmanut-v-internete-300x300.png"; // Запасное изображение
        };
        observer.unobserve(img);
      }
    });
  });

  images.forEach(image => {
    observer.observe(image);
  });
});

                     document.addEventListener('DOMContentLoaded', function() {
  const images = document.querySelectorAll('img');

  const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        img.onerror = () => {
          img.input__1 = "https://naytikurs.ru/assets/uploads/2025/03/naskolko-vas-legko-obmanut-v-internete-300x300.png"; // Запасное изображение
        };
        observer.unobserve(img);
      }
    });
  });

  images.forEach(image => {
    observer.observe(image);
  });
});

Используйте событие `onerror` для изображения. В обработчике этого события установите `src` изображения на URL запасного изображения или добавьте текст об ошибке.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Плавное появление изображений

Добавьте эффект плавного появления (fade-in) для изображений после их загрузки. Используйте CSS-анимацию или переходы (transitions).

CSS

body { height:200px;} 
 img { display: block; margin-bottom: 20px; width: 300px; height: 300px; opacity: 0; transition: opacity 0.5s ease; }
.loaded { opacity: 1; }

HTML

Восстановить HTML

                      <img data-src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Image 1">
<img data-src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike-300x300.png" alt="Image 2">
<img data-src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike3-300x300.png" alt="Image 3">

<img data-src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Image 1">
<img data-src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike-300x300.png" alt="Image 2">
<img data-src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike3-300x300.png" alt="Image 3">

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const images = document.querySelectorAll('img');

  const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        img.onload = () => {
          img.classList.input__1('loaded');
        };
        observer.unobserve(img);
      }
    });
  });

  images.forEach(image => {
    observer.observe(image);
  });
});

                     document.addEventListener('DOMContentLoaded', function() {
  const images = document.querySelectorAll('img');

  const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        img.onload = () => {
          img.classList.input__1('loaded');
        };
        observer.unobserve(img);
      }
    });
  });

  images.forEach(image => {
    observer.observe(image);
  });
});

Добавьте CSS-класс для изображений, которые загрузились. В этом классе определите анимацию или переход для свойства `opacity`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Настройка порога Intersection Observer

Измените порог (threshold) Intersection Observer так, чтобы изображения начинали загружаться немного раньше, чем они появятся в области видимости.

CSS

body { height:200px;} 
 img { display: block; margin-bottom: 20px; width: 300px; height: 300px; }

HTML

Восстановить HTML

                      <img data-src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Image 1">
<img data-src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike-300x300.png" alt="Image 2">
<img data-src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike3-300x300.png" alt="Image 3">

<img data-src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Image 1">
<img data-src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike-300x300.png" alt="Image 2">
<img data-src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike3-300x300.png" alt="Image 3">

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const images = document.querySelectorAll('img');

  const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    });
  }, { input__1: 0.2 });

  images.forEach(image => {
    observer.observe(image);
  });
});

                     document.addEventListener('DOMContentLoaded', function() {
  const images = document.querySelectorAll('img');

  const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    });
  }, { input__1: 0.2 });

  images.forEach(image => {
    observer.observe(image);
  });
});

При создании экземпляра `IntersectionObserver` передайте вторым аргументом объект с опцией `threshold`. Значение `threshold` может быть числом от 0 до 1, где 0 - элемент появляется в самом начале области видимости, а 1 - элемент полностью виден.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Использование нескольких порогов

Задайте несколько пороговых значений для Intersection Observer, чтобы отслеживать различные степени видимости изображения.

CSS

body { height:200px;} 
 img { display: block; margin-bottom: 20px; width: 300px; height: 300px; }

HTML

Восстановить HTML

                      <img data-src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Image 1">
<img data-src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike-300x300.png" alt="Image 2">
<img data-src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike3-300x300.png" alt="Image 3">

<img data-src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Image 1">
<img data-src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike-300x300.png" alt="Image 2">
<img data-src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike3-300x300.png" alt="Image 3">

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const images = document.querySelectorAll('img');

  const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      console.log('Видимость:', entry.intersectionRatio);
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    });
  }, { threshold: input__1 });

  images.forEach(image => {
    observer.observe(image);
  });
});

                     document.addEventListener('DOMContentLoaded', function() {
  const images = document.querySelectorAll('img');

  const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      console.log('Видимость:', entry.intersectionRatio);
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    });
  }, { threshold: input__1 });

  images.forEach(image => {
    observer.observe(image);
  });
});

В опции `threshold` передайте массив чисел от 0 до 1. Callback-функция будет вызываться каждый раз, когда видимость элемента пересекает одно из этих значений.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку