Изображения

Ускорьте время загрузки страницы и уменьшите трафик, загружая их, когда они входят в область просмотра.

Если отложенная загрузка включена, изображения загружаются при входе в область просмотра. И не беспокойтесь о скачках контента при загрузке изображений. Благодаря пустому изображению-заполнителю, которое генерируется мгновенно, все будет на месте с самого начала.

Компонент Image значительно повышает скорость загрузки ваших страниц с помощью следующих методов:

• Сначала загружаются только изображения, которые изначально находятся в окне просмотра.
• Другие изображения загружаются с применением Lazy Load, когда они попадают в окно просмотра при прокрутке.
• Пустое изображение-заполнитель генерируется мгновенно, чтобы предотвратить скачки содержимого, когда изображения загружаются или еще не находятся в области просмотра.
• Опционально, изображение-заполнитель может иметь любой вид фона или анимацию предварительной загрузки.

Компонент Изображения поддерживает элементы img и свойство CSS background-image. Атрибут srcset для изображений поддерживает также создание оптимальных изображений для устройств различной ширины и плотности пикселей (Retina). Компонент Image даже позволяет использовать srcset для свойства background-image!

Как использовать компонент Image в UIkit 3. Все о картинках на сайте.

Чтобы начать использовать компонент, добавьте атрибут uk-img к элементу <img> и добавьте data- префикс src к атрибуту, чтобы он мог прочитать data-src.

<img data-src="" width="" height="" alt="" uk-img>

Атрибуты width и height необходимы, чтобы можно было создать пустой заполнитель в таким же размером, что и изображение. В качестве альтернативы, используйте data-width и data-height, если вы не хотите устанавливать явные атрибуты.

Srcset

Для использования атрибута srcset добавьте префикс data-srcset.

<img data-src="" data-srcset="" sizes="" width="" height="" alt="" uk-img>

Фоновое изображение

Чтобы использовать этот компонент с CSS свойством background-image, добавьте его к <div> или любому другому элементу.

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

Фоновое изображение вместе с with 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); }

Опции компонента

Любой из этих параметров может быть применен к атрибуту компонента. Разделяйте несколько вариантов точкой с запятой. Подробнее о синтаксисе

JavaScript

Подробнее о Компонентах JS.

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

UIkit.img(element, options);