Компонент Изображение

Image: Использование

Чтобы применить компонент Изображение и отложить загрузку фоновых картинок, добавьте атрибут 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="images/photo.webp" uk-img>
    <h3 class="uk-h1">Фоновое изображение</h3>
</div>

<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>
    <h3 class="uk-h1">Фоновая картинка</h3>
</div>

Sources

Источники изображений

Чтобы использовать разные источники изображений, как это делает элемент <picture>, содержащий <source> элементы, добавьте атрибут sources с параметрами 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;images/type-avif.avif&quot;,
                &quot;type&quot;: &quot;image\/avif&quot;
                },
                {&quot;srcset&quot;: &quot;images/type-webp.webp&quot;,
                &quot;type&quot;: &quot;image\/webp&quot;
                }]"
     data-src="images/type-jpg.jpg"
     uk-img>
    <h3 class="uk-h1">Background Image J</h3>
</div>

• Результат
• Разметка

Background Image B

<div class="uk-height-medium uk-flex uk-flex-center uk-flex-middle uk-background-cover"
     sources='[{ "srcset": "images/type-avif.avif",
                 "type"  : "image/avif"
                },
                {"srcset": "images/type-webp.webp",
                 "type"  : "image/webp"
                }]'
     data-src="images/type-jpg.jpg"
     uk-img>
    <h3 class="uk-h1">Background Image B</h3>
</div>

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

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

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

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

JavaScript

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

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

UIkit.img(element, options);