Компонент Изображение 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 необходимы для того, чтобы "пустышка-заполнитель" сформировался точно в таком же размере, что и изображение.

Примечание Если вы не хотите устанавливать явные атрибуты width и height используйте data-width и data-height.

<img data-src="" data-width="" data-height="" 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>

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.

Предыдущее и следующее

Загрузить предыдущий и следующий

Также возможно загрузить только изображение активного слайда и лениво загружать изображения других слайдов. Просто нацельте "указатель" на предыдущий и следующий слайды для каждого изображения, используя параметр 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>

Заполнитель

Пользовательский заполнитель

По умолчанию "заполнитель" изображения является прозрачным. Используйте селектор 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);