Компонент Изображение 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>
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> <h1>Background Image</h1> </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> <h1>Background Image</h1> </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> <h1>Background Image J</h1> </div>
JavaScript
Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.
Инициализация
UIkit.img(element, options);
Session Storage
.
Таким образом он пытается определить, кэшировано ли уже изображение.
Кэшированное изображение загружается немедленно, без механизма ленивой загрузки, чтобы предотвратить любые вспышки рендеринга.
Перед тестированием компонента Image обязательно удалите эти записи из хранилища сеансов браузера.
Устарело
Пользовательский заполнитель
По умолчанию "заполнитель" изображения является прозрачным. Используйте селектор img[data-src][src*='data:image']
, чтобы добавить пользовательский фон или анимацию предварительной загрузки.
img[data-src][src*='data:image'] { background: rgba(0,0,0,0.1); }
Встроенный SVG
Чтобы применить ленивую загрузку (Lazy loading) к встроенным изображениям SVG, используя компонент SVG, обязательно применяйте опцию data-src
в атрибуте компонента, а не в качестве атрибута данных (data attribute).
<img uk-img="data-src:" width="" height="" alt="" uk-svg>
Использование Srcset
Чтобы использовать атрибут srcset
необходимо к нему же добавить префикс data-
.
В результате должно получиться data-srcset=""
.
<img data-src="" data-srcset="" sizes="" width="" height="" alt="" uk-img>
Загрузить предыдущее и следующее изображение
Также возможно загрузить только изображение активного слайда и лениво загружать изображения других слайдов.
Просто нацельте "указатель" на предыдущий и следующий слайды для каждого изображения,
используя параметр target: !* -*, !* +*
. Есть два исключения, где вы должны выбрать первый и последний слайды.
Селектор | Описание |
---|---|
!* -* |
Ищет прямого родителя (!* ) и выбирает предыдущий элемент (-* ). |
!* +* |
Ищет прямого родителя (!* ) и выбирает последующий элемент (+* ). |
!.uk-slideshow-items > :last-child |
Ищет следующий родительский элемент с классом .uk-slideshow-item и выбирает последнего потомка. |
!.uk-slideshow-items > :first-child |
Ищет следующий родительский элемент с классом .uk-slideshow-item и выбирает первый дочерний элемент. |
<ul class="uk-slideshow-items">
<li>
<img data-src="" width="" height="" alt="" uk-img="target: !ul > :last-child, !* +*">
<!-- предыдущий, т.е. последний, следующий -->
</li>
...
Устарело: Target
Обычно изображение начинает загружаться, когда оно входит в область просмотра. Чтобы начать загрузку изображений в зависимости от видимости другого элемента в окне просмотра, используйте опцию target
. Это очень полезно для отложенной загрузки изображений в компонентах Слайд-шоу и Слайдер.
<img data-src="" width="" height="" alt="" uk-img="target: .my-class">
В следующем примере загружаются все изображения на слайдах, как только слайд-шоу входит в область просмотра. Оно использует !.uk-slideshow-items
в качестве целевого селектора. !
ищет DOM, чтобы найти следующий родительский элемент с классом .uk-slideshow-items
.
-
-
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: scale"> <ul class="uk-slideshow-items"> <li> <img data-src="/demo/img/dark.jpg" width="1800" height="1200" alt="" uk-cover uk-img="target: !.uk-slideshow-items"> </li> <li> <img data-src="/demo/img/opa.jpg" width="1400" height="800" alt="" uk-cover uk-img="target: !.uk-slideshow-items"> <div class="uk-position-top-center uk-position-large uk-h3"> Target </div> </li> <li> <img data-src="/demo/img/light.jpg" width="1800" height="1200" alt="" uk-cover uk-img="target: !.uk-slideshow-items"> </li> </ul> <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a> <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a> </div>