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

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>
    <h1>Background Image</h1>
</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>
    <h1>Background Image</h1>
</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>
    <h1>Background Image J</h1>
</div>

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

При использовании компонента 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 0 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.

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

JavaScript

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

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

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

Устарело

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

По умолчанию "заполнитель" изображения является прозрачным. Используйте селектор img[data-src][src*='data:image'], чтобы добавить пользовательский фон или анимацию предварительной загрузки.

img[data-src][src*='data:image'] { background: rgba(0,0,0,0.1); }

Встроенный 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>

Загрузить предыдущее и следующее изображение

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

Устарело: Target

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

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

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

    • Target 
  • <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>