Компонент Изображение : Image
Ускоряем время загрузки страницы загружая изображения только когда они входят в область просмотра, уменьшаем трафик. Применение. Разметка. Руководство.
Компонент Изображение значительно повышает скорость загрузки страницы, используя следующие методы:
- Загружаются только те изображения, которые изначально находятся в окне просмотра.
- Другие изображения загружаются по принципу ленивой загрузки (Lazy loading), когда они попадают в окно просмотра при прокрутке.
- Пустое изображение-заполнитель (placeholder image) генерируется мгновенно, чтобы предотвратить скачок содержимого, когда изображения загружаются или еще не находятся в видимой области экрана.
- Опционально, изображение-заполнитель может иметь любой вид фона или анимацию предварительной загрузки.
Компонент Изображение поддерживает элемент img
и свойство CSS background-image
. Поддерживается атрибут srcset
для изображений, а также создание оптимальных изображений для различной ширины устройств и дисплеев с высоким разрешением (retina). Компонент Изображение даже позволяет использовать атрибут srcset
для css-свойства background-image
.
Использование
Чтобы применить компонент Изображение, добавьте к элементу <img>
атрибут uk-img
и добавьте префикс data-
к атрибуту src
, чтобы он читался как data-src
.
<img data-src="" width="" height="" alt="" uk-img>
Атрибуты width
и height
необходимы для того, чтобы "пустышка-заполнитель" сформировался точно в таком же размере, что и изображение.
-
-
<img data-src="/demo/img/light.jpg" width="1800" height="1200" alt="" uk-img>
width
и height
используйте data-width
и data-height
.
<img data-src="" data-width="" data-height="" alt="" uk-img>
-
-
<img data-src="/demo/img/dark.jpg" data-width="900" data-height="600" alt="" uk-img>
Встроенный SVG
Чтобы применить ленивую загрузку (Lazy loading) к встроенным изображениям SVG, используя компонент SVG, обязательно применяйте опцию data-src
в атрибуте компонента, а не в качестве атрибута данных (data attribute).
<img uk-img="data-src:" width="" height="" alt="" uk-svg>
-
-
<img uk-img="data-src:/demo/img/strokes.svg" width="350" height="340" alt="" uk-svg>
Использование Srcset
Чтобы использовать атрибут srcset
необходимо к нему же добавить префикс data-
.
В результате должно получиться data-srcset=""
.
<img data-src="" data-srcset="" sizes="" width="" height="" alt="" uk-img>
-
-
<img data-src="https://images.unsplash.com/photo-1522201949034-507737bce479?fit=crop&w=650&h=433&q=80" data-srcset="https://images.unsplash.com/photo-1522201949034-507737bce479?fit=crop&w=650&h=433&q=80 650w, https://images.unsplash.com/photo-1522201949034-507737bce479?fit=crop&w=1300&h=866&q=80 1300w" sizes="(min-width: 650px) 650px, 100vw" width="650" height="433" alt="" uk-img>
Background image
Чтобы использовать этот компонент с CSS-свойством background-image
, добавьте его к элементу <div>
или любому другому элементу.
<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>
Background image и Srcset
Компонент Изображение позволяет использовать srcset
для фоновых изображений. Просто добавьте атрибут data-srcset
. Если вам нужен атрибут sizes
, на выходе должны получить data-sizes=""
.
<div data-src="" data-srcset="" data-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" data-sizes="(min-width: 650px) 650px, 100vw" uk-img> <h4 class="uk-h1">Фоновая картинка</h4> </div>
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>
Загрузить предыдущий и следующий
Также возможно загрузить только изображение активного слайда и лениво загружать изображения других слайдов. Просто нацельте "указатель" на предыдущий и следующий слайды для каждого изображения, используя параметр 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>
<li>
<img data-src="" width="" height="" alt="" uk-img="target: !* -*, !* +*">
</li>
<li>
<img data-src="" width="" height="" alt="" uk-img="target: !* -*, !* +*">
</li>
<li>
<img data-src="" width="" height="" alt="" uk-img="target: !* -*, !ul > :first-child">
</li>
</ul>
-
-
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow> <ul class="uk-slideshow-items"> <li> <img data-src="/demo/img/photo.jpg" width="1800" height="1200" alt="" uk-cover uk-img="target: !ul > :last-child, !* +*"> </li> <li> <img data-src="/demo/img/dark.jpg" width="1800" height="1200" alt="" uk-cover uk-img="target: !* -*, !* +*"> </li> <li> <img data-src="/demo/img/light.jpg" width="1800" height="1200" alt="" uk-cover uk-img="target: !* -*, !ul > :first-child"> </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>
Пользовательский заполнитель
По умолчанию "заполнитель" изображения является прозрачным. Используйте селектор img[data-src][src*='data:image']
, чтобы добавить пользовательский фон или анимацию предварительной загрузки.
img[data-src][src*='data:image'] { background: rgba(0,0,0,0.1); }
Опции компонента
При использовании компонента Image к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.
Опция | Значение | По умолчанию | Описание |
---|---|---|---|
dataSrc |
String | '' | Атрибут изображения src . |
dataSrcset |
String | false | Атрибут изображения srcset . |
sizes |
String | false | Атрибут изображения sizes . |
width |
String | false | Атрибут изображения width . Он будет использоваться для определения ширины заполнителя и положения изображения в документе. |
height |
String | false | Атрибут изображения height . Он будет использоваться для определения высоты заполнителя и позиции изображения в документе. |
offsetTop |
String | '50vh' | The offset increases the viewport's bounding box vertically before computing an intersection with the image. |
offsetLeft |
String | The offset increases the viewport's bounding box horizontally before computing an intersection with the image. | |
target |
String | false | A list of targets who's bounding boxes will be used to compute an intersection with the image. Defaults to the image itself. |
JavaScript
Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.
Инициализация
UIkit.img(element, options);