Компонент Изображение 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="/demo/img/light.jpg" width="1800" height="1200" alt="" uk-img>
Примечание Если вы не хотите устанавливать явные атрибуты width и height используйте data-width и data-height. 
<img data-src="" data-width="" data-height="" alt="" uk-img>

  • <img data-src="/demo/img/dark.jpg" data-width="900" data-height="600" 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>

  • <img data-src="https://images.unsplash.com/photo-1522201949034-507737bce479?fit=crop&w=650&h=433&q=80"
     data-srcset="https://images.unsplash.com/photo-1522201949034-507737bce479?fit=crop&w=650&h=433&q=80 650w,
                  https://images.unsplash.com/photo-1522201949034-507737bce479?fit=crop&w=1300&h=866&q=80 1300w"
     sizes="(min-width: 650px) 650px, 100vw" width="650" height="433" 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 
  • <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>

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

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

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

  • <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow>
    <ul class="uk-slideshow-items">
        <li>
            <img data-src="/demo/img/photo.jpg" width="1800" height="1200" alt="" uk-cover uk-img="target: !ul > :last-child, !* +*">
        </li>
        <li>
            <img data-src="/demo/img/dark.jpg" width="1800" height="1200" alt="" uk-cover uk-img="target: !* -*, !* +*">
        </li>
        <li>
            <img data-src="/demo/img/light.jpg" width="1800" height="1200" alt="" uk-cover uk-img="target: !* -*, !ul > :first-child">
        </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>

Заполнитель

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

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