Ленивая загрузка изображений (loading='lazy')

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

Опубликовано 04.04.2025
Просмотры 32
Автор
Рек. время прохождения 2 минуты
Упражнений 7
Комментарии 0
Тренажер HTML
Ленивая загрузка (lazy loading) — это техника оптимизации, которая откладывает загрузку ресурсов (чаще всего изображений) до тех пор, пока они не понадобятся. Вместо того чтобы загружать все изображения сразу при открытии страницы, браузер загружает только те, что видны в области просмотра. Остальные изображения подгружаются по мере того, как пользователь прокручивает страницу вниз. Этот подход значительно ускоряет начальную загрузку страницы, экономит трафик и улучшает пользовательский опыт, особенно на медленных соединениях. В этой серии заданий вы научитесь применять специальный HTML-атрибут для управления ленивой загрузкой изображений и оптимизации ваших веб-страниц.
Список тем

Добавляем атрибут ленивой загрузки

id: 37818_lazy-loading-1

У нас есть одно большое изображение, которое находится далеко внизу страницы. Чтобы ускорить загрузку, добавьте к нему атрибут, отвечающий за отложенную загрузку. В этом задании нужно указать только имя атрибута.

CSS
body {
  font-family: sans-serif;
  padding: 1rem;
}
.spacer {
  height: 800px; /* Создаем пространство для прокрутки */
  border-bottom: 2px dashed #ccc;
  text-align: center;
  padding-top: 20px;
}
img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
HTML
<div class="spacer">
  <p>Прокрутите вниз, чтобы увидеть изображение</p>
</div>
<img src="https://naytikurs.ru/img/1.png" alt="Горный пейзаж" width="300" height="200" input1="lazy">
Для управления загрузкой изображений используется атрибут `loading`. Чтобы включить ленивую загрузку, ему нужно присвоить значение `lazy`. В данном задании требуется вписать только имя атрибута — `loading`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Указываем значение 'lazy'

id: 37818_lazy-loading-2

Теперь, когда вы знаете имя атрибута, укажите правильное значение, чтобы включить именно *ленивую* (отложенную) загрузку изображения.

CSS
body {
  font-family: sans-serif;
  padding: 1rem;
}
.spacer {
  height: 800px;
  border-bottom: 2px dashed #ccc;
  text-align: center;
  padding-top: 20px;
}
img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
HTML
<div class="spacer">
  <p>Прокрутите вниз</p>
</div>
<img src="https://naytikurs.ru/img/2.png" alt="Лесная тропа" width="300" height="200" loading="input1">
Атрибут `loading` может принимать два основных значения: `lazy` для отложенной загрузки и `eager` для немедленной. Чтобы включить ленивую загрузку, используйте значение `lazy`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Атрибут и значение вместе

id: 37818_lazy-loading-3

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

CSS
body {
  font-family: sans-serif;
  padding: 1rem;
}
.spacer {
  height: 800px;
  border-bottom: 2px dashed #ccc;
  text-align: center;
  padding-top: 20px;
}
img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
HTML
<div class="spacer">
  <p>Прокрутите вниз</p>
</div>
<img src="https://naytikurs.ru/img/4.png" alt="Городской пейзаж" width="300" height="200" input1>
Вам нужно вписать конструкцию `атрибут="значение"` целиком. Для ленивой загрузки это будет `loading="lazy"`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

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

id: 37818_lazy-loading-4

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

CSS
body {
  font-family: sans-serif;
}
h2 {
  text-align: center;
}
.gallery {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.gallery img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
HTML
<h2>Фотогалерея</h2>
<div class="gallery">
  <img src="https://naytikurs.ru/img/5.png" alt="Кот" width="300" height="200">
  <img src="https://naytikurs.ru/img/6.png" alt="Пляж" width="300" height="200" input1="lazy">
  <img src="https://naytikurs.ru/img/7.png" alt="Горы" width="300" height="200" loading="input2">
  <img src="https://naytikurs.ru/img/8.png" alt="Пустыня" width="300" height="200" input3>
</div>
Первое изображение видно сразу, поэтому для него не нужна ленивая загрузка. Для всех остальных изображений, которые появятся только после прокрутки, добавьте атрибут `loading` со значением `lazy`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Принудительная загрузка с 'eager'

id: 37818_lazy-loading-5

Иногда нужно, чтобы важное изображение вверху страницы загрузилось как можно скорее. Укажите значение, которое заставит браузер загрузить изображение немедленно, не откладывая.

CSS
body {
  font-family: sans-serif;
  padding: 1rem;
}
.hero-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.content {
  margin-top: 20px;
}
HTML
<h1>Главный баннер</h1>
<img class="hero-image" src="https://naytikurs.ru/img/9.png" alt="Главный баннер" width="300" height="200" loading="input1">
<div class="content">
  <p>Этот текст находится под важным изображением.</p>
</div>
Помимо значения `lazy`, существует значение `eager`. Оно указывает браузеру загружать ресурс немедленно, не дожидаясь прокрутки. `eager` является значением по умолчанию, но его явное указание может быть полезно для ясности кода.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Ленивая загрузка для iframe

id: 37818_lazy-loading-6

Атрибут `loading` работает не только для изображений, но и для элементов `<iframe>`. Примените ленивую загрузку к встроенному контенту, чтобы он не замедлял загрузку страницы.

CSS
body {
  font-family: sans-serif;
  padding: 1rem;
}
.spacer {
  height: 700px;
  border-bottom: 2px dashed #ccc;
  text-align: center;
  padding-top: 20px;
}
iframe {
  max-width: 100%;
  border: 0;
  border-radius: 8px;
}
HTML
<div class="spacer">
  <p>Прокрутите вниз, чтобы увидеть встроенный фрейм</p>
</div>
<input1 src="https://example.com/" 
  width="320" 
  height="200" 
  title="Пример встроенной страницы" 
  input2="lazy">
</input1>
Синтаксис для `<iframe>` точно такой же, как и для `<img>`. Добавьте атрибут `loading` со значением `lazy` к тегу `<iframe>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Сочетание с атрибутом 'alt'

id: 37818_lazy-loading-7

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

CSS
body {
  font-family: sans-serif;
}
.spacer {
  height: 800px;
}
img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
HTML
<p>Прокрутите страницу вниз...</p>
<div class="spacer"></div>
<img src="https://naytikurs.ru/img/1.png" width="300" height="200" input1 input2="Красивый закат в горах">
Вам нужно добавить два атрибута: `loading="lazy"` для отложенной загрузки и `alt` для доступности. Текст для `alt` уже предоставлен в коде.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру