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

Предварительная загрузка адаптивных изображений

Элемент <link> c rel="preload" cообщает браузеру на необходимость загрузить ресурс, который необходимо загрузить в первую очередь, так как этот ресурс может понадобится на странице очень скоро, еще до их обнаружения в HTML.

<link rel="preload" href="my-bg-image-small.png" as="image" media="(max-width: 639px)">
<link rel="preload" href="my-bg-image-large.png" as="image" media="(min-width: 640px)">

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>
    <h3 class="uk-h1">Background Image</h3>
</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>
    <h3 class="uk-h1">Background Image</h3>
</div>

Несколько источников могут быть определены с использованием синтаксиса JSON.

[
    {
        "srcset": "____",
        "media": "____"
    },
    {
        "srcset": "____",
        "type": "____"
    }
]

JSON должен быть закодирован в HTML.

<div sources="[{&quot;type&quot;: &quot;____&quot;,
                &quot;srcset&quot;: &quot;____&quot;
               },
               {&quot;type&quot;: &quot;____&quot;,
                &quot;srcset&quot;: &quot;____&quot;
               }]"
     data-src="" uk-img>...</div>

Background Image J

<div class="uk-height-medium uk-flex uk-flex-center uk-flex-middle uk-background-cover"
     sources="[{&quot;srcset&quot;: &quot;/demo/v3/img/image-type.avif&quot;,
                &quot;type&quot;: &quot;image\/avif&quot;
                },
                {&quot;srcset&quot;: &quot;/demo/v3/img/image-type.webp&quot;,
                &quot;type&quot;: &quot;image\/webp&quot;
                }]"
        data-src="/demo/v3/img/image-type.jpg"
        uk-img>
    <h3 class="uk-h1">Background Image J</h3>
</div>

Параметры для атрибута

При использовании компонента Image к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.

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

Опция	Значение	По умолчанию	Описание
`dataSrc`	String	''	Атрибут изображения `src`.
`sources`	String	''	Источники изображения. Этот параметр используется только для фоновых изображений. Атрибуты источников передаются в формате `key: value;` для одного источника. Для нескольких источников в формате JSON.
`loading`	lazy	`eager`	Ленивость.
`margin`	String	50%	Поле добавляется к ограничивающей рамке области просмотра перед вычислением пересечения с изображением. Значение должно быть в px или %.
`target`	String	false	Список целей, ограничивающие рамки которых будут использоваться для вычисления пересечения с изображением. По умолчанию само изображение.

dataSrc является Primary опцией. Если это единственный параметр в значении атрибута, то её ключ можно не использовать.

JavaScript

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

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

UIkit.img(element, options);

Компонент Image хранит записи об уже загруженных изображениях в Session Storage. Таким образом он пытается определить, кэшировано ли уже изображение. Кэшированное изображение загружается немедленно, без механизма ленивой загрузки, чтобы предотвратить любые вспышки рендеринга. Перед тестированием компонента Image обязательно удалите эти записи из хранилища сеансов браузера.