Компонент Изображение Image
Фоновые изображения с отложенной загрузкой. Ускоряем время загрузки страницы загружая фоновые изображения лениво, только когда они входят в область просмотра.
Компонент Изображение значительно повышает скорость загрузки страницы загружая только те фоновые изображения, которые изначально находятся в окне просмотра.
Фоновые изображения подгружаются по принципу ленивой загрузки - Lazy loading, т.е. когда фоновое изображение при прокрутке страницы попадает в окно просмотра.
Для фоновых изображений поддерживаются атрибуты srcset
и sizes
. Атрибуты поддерживаются последними версиями современных настольных и мобильных браузеров.
Использование
Чтобы применить компонент Изображение и отложить загрузку фоновых картинок,
добавьте атрибут data-src
содержащий путь к изображению для фоновой картинки
к элементу <div>
или любому другому элементу, а также добавьте атрибут uk-img
.
<div data-src="" uk-img>...</div>
-
Фоновое изображение
-
<div class="uk-height-medium uk-flex uk-flex-center uk-flex-middle uk-background-cover uk-light" data-src="/demo/img/photo.jpg" uk-img> <h3 class="uk-h1">Фоновое изображение</h3> </div>
Заметка
Атрибут loading
элемента <img>
или <iframe>
позволяет браузеру откладывать загрузку содержимого, указывая браузеру на необходимость отложить загрузку до тех пор,
пока пользователь не окажется достаточно близко к этим элементам.
eager
- Указывает на немедленную загрузку.
lazy
- Откладывает загрузку до того момента, пока элемент не достигнет необходимого расстояния области просмотра определяемого браузером.
<img src="img/my-image.webp" width="" height="" alt="" loading="lazy">
<iframe src="video/my-video.html" width="" height="" loading="lazy"></iframe>
Нетерпеливая загрузка Eager
Чтобы избежать ленивой загрузки фоновых изображений для первого видимого окна просмотра,
но при этом использовать другие функции этого компонента, добавьте параметр loading="eager"
к атрибуту uk-img
.
loading="eager"
позволяет загрузить фоновое изображение независимо от того, находится оно в области просмотра или нет.
-
loading: eager
-
<div class="uk-height-medium uk-flex uk-flex-center uk-flex-middle uk-background-cover uk-light" data-src="https://images.unsplash.com/photo-1513581166391-887a96ddeafd?fit=crop&w=650&h=433&q=80" uk-img="loading: eager"> <h3 class="uk-h1">loading: eager</h3> </div>
Предварительная загрузка адаптивных изображений
Элемент <link>
c rel="preload"
cообщает браузеру на необходимость загрузить ресурс,
который необходимо загрузить в первую очередь,
так как этот ресурс может понадобится на странице очень скоро, еще до их обнаружения в HTML.
<link rel="preload" href="my-bg-image-small.png" as="image" media="(max-width: 639px)">
<link rel="preload" href="my-bg-image-large.png" as="image" media="(min-width: 640px)">
Srcset
Компонент Изображение позволяет использовать srcset
для фоновых изображений.
Просто добавьте атрибут data-srcset
(в самом начале префикс data).
Если вам нужен атрибут sizes
, то добавьте атрибут без префикса.
<div data-src="" data-srcset="" sizes="" uk-img>...</div>
-
Фоновая картинка
-
<div class="uk-height-medium uk-flex uk-flex-center uk-flex-middle uk-background-cover uk-light" data-src="https://images.unsplash.com/photo-1490822180406-880c226c150b?fit=crop&w=650&h=433&q=80" data-srcset="https://images.unsplash.com/photo-1490822180406-880c226c150b?fit=crop&w=650&h=433&q=80 650w, https://images.unsplash.com/photo-1490822180406-880c226c150b?fit=crop&w=1300&h=866&q=80 1300w" sizes="(min-width: 650px) 650px, 100vw" uk-img> <h4 class="uk-h1">Фоновая картинка</h4> </div>
Sources
Источники изображений
Чтобы использовать разные источники изображений, как это делает элемент <picture>
,
содержащий <source>
элементы,
добавьте атрибут source
с параметрами srcset
media
и type
.
<div sources="srcset: ____; media: ____" data-src="" uk-img>...</div>
<div sources="srcset: ____; type: ____" data-src="" uk-img>...</div>
-
Background Image
-
<div class="uk-height-medium uk-flex uk-flex-center uk-flex-middle uk-background-cover uk-light" sources="srcset: https://images.unsplash.com/photo-1512236077335-f1cda9239c11?fit=crop&w=650&h=433&q=80; media: (min-width: 1200px)" data-src="https://images.unsplash.com/photo-1556830352-952b2ed372ae?fit=crop&w=650&h=433&q=80" uk-img> <h3 class="uk-h1">Background Image</h3> </div>
Можно предоставить несколько источников изображений, а также несколько разрешений для каждого источника, используя srcset
.
<div sources="srcset: ____; media: ____" data-src="" data-srcset="" sizes="" uk-img>...</div>
-
Background Image
-
<div class="uk-height-medium uk-flex uk-flex-center uk-flex-middle uk-background-cover uk-light" sources="srcset: https://images.unsplash.com/photo-1464621922360-27f3bf0eca75?fit=crop&w=650&h=433&q=80 650w, https://images.unsplash.com/photo-1464621922360-27f3bf0eca75?fit=crop&w=1300&h=866&q=80 1300w; media: (min-width: 1200px)" data-src="https://images.unsplash.com/photo-1472803828399-39d4ac53c6e5?fit=crop&w=650&h=433&q=80" data-srcset="https://images.unsplash.com/photo-1472803828399-39d4ac53c6e5?fit=crop&w=650&h=433&q=80 650w, https://images.unsplash.com/photo-1472803828399-39d4ac53c6e5?fit=crop&w=1300&h=866&q=80 1300w" sizes="(min-width: 650px) 650px, 100vw" uk-img> <h3 class="uk-h1">Background Image</h3> </div>
Несколько источников могут быть определены с использованием синтаксиса JSON.
[
{
"srcset": "____",
"media": "____"
},
{
"srcset": "____",
"type": "____"
}
]
JSON должен быть закодирован в HTML.
<div sources="[{"type": "____",
"srcset": "____"
},
{"type": "____",
"srcset": "____"
}]"
data-src="" uk-img>...</div>
В этом примере предлагаются альтернативные форматы изображений, такие как WebP и AVIF.
-
Background Image J
-
<div class="uk-height-medium uk-flex uk-flex-center uk-flex-middle uk-background-cover" sources="[{"srcset": "/demo/v3/img/image-type.avif", "type": "image\/avif" }, {"srcset": "/demo/v3/img/image-type.webp", "type": "image\/webp" }]" data-src="/demo/v3/img/image-type.jpg" uk-img> <h3 class="uk-h1">Background Image J</h3> </div>
JavaScript
Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.
Инициализация
UIkit.img(element, options);
Session Storage
.
Таким образом он пытается определить, кэшировано ли уже изображение.
Кэшированное изображение загружается немедленно, без механизма ленивой загрузки, чтобы предотвратить любые вспышки рендеринга.
Перед тестированием компонента Image обязательно удалите эти записи из хранилища сеансов браузера.