Компонент Изображение : 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="" 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>

Использование 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>

Background image и Srcset

Компонент Изображение позволяет использовать srcset для фоновых изображений. Просто добавьте атрибут data-srcset. Если вам нужен атрибут sizes, на выходе должны получить data-sizes="".

<div data-src="" data-srcset="" data-sizes="" uk-img>...</div>

Target

Обычно изображение начинает загружаться, когда оно входит в область просмотра. Чтобы начать загрузку изображений в зависимости от видимости другого элемента в окне просмотра, используйте опцию target. Это очень полезно для отложенной загрузки изображений в компонентах Слайд-шоу и Слайдер.

<img data-src="" width="" height="" alt="" uk-img="target: .my-class">

В следующем примере загружаются все изображения на слайдах, как только слайд-шоу входит в область просмотра. Оно использует !.uk-slideshow-items в качестве целевого селектора. ! ищет DOM, чтобы найти следующий родительский элемент с классом .uk-slideshow-items.

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

Также возможно загрузить только изображение активного слайда и лениво загружать изображения других слайдов. Просто нацельте "указатель" на предыдущий и следующий слайды для каждого изображения, используя параметр target: !* -*, !* +*. Есть два исключения, где вы должны выбрать первый и последний слайды.

<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 к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.

JavaScript

Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.

Инициализация

UIkit.img(element, options);