跳到主要内容

文档

Image

使用带懒加载、响应式图片以及多种图片来源的背景图片

Image 组件模拟 <img> 元素的浏览器特性，但针对的是背景图片。这包括 loading="lazy"、srcset 和 sizes 属性，以及来自 <picture> 元素的 <source> 元素。它只在背景图片进入视口时才加载，从而加快页面加载速度并减少流量。针对不同的设备宽度和高分辨率（retina）显示屏，会提供经过优化的背景图片。

用法

要应用该组件，请为一个 div 或任意其他元素添加 uk-img 属性以及包含背景图片路径的 data-src 属性。默认情况下，背景图片在滚动进入视口时会进行懒加载。

<div 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" data-src="https://images.unsplash.com/photo-1490822180406-880c226c150b?fit=crop&w=650&h=433&q=80" uk-img>
  <h1>Background Image</h1>
</div>

立即加载

若要避免对首个可见视口内的背景图片进行懒加载，同时仍使用该组件的其他特性，请为 uk-img 属性添加 loading="eager" 参数。

<div data-src="" uk-img="loading: eager">…</div>

Background Image

<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-1495321308589-43affb814eee?fit=crop&w=650&h=433&q=80" uk-img="loading: eager">
  <h1>Background Image</h1>
</div>

Srcset

要为背景图片使用 srcset 特性，只需添加 data-srcset 属性。可选地，还可以添加 sizes 属性，但不带前缀。

<div 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"
     data-src="https://images.unsplash.com/photo-1491895200222-0fc4a4c35e18?fit=crop&w=650&h=433&q=80"
     data-srcset="https://images.unsplash.com/photo-1491895200222-0fc4a4c35e18?fit=crop&w=650&h=433&q=80 650w,
                  https://images.unsplash.com/photo-1491895200222-0fc4a4c35e18?fit=crop&w=1300&h=866&q=80 1300w"
     sizes="(min-width: 650px) 650px, 100vw" uk-img>
    <h1>Background Image</h1>
</div>

Picture 来源

要像包含 <source> 元素的 <picture> 元素那样使用不同的图片来源，请添加 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-1487837647815-bbc1f30cd0d2?fit=crop&w=650&h=433&q=80; media: (min-width: 1200px)"
     data-src="https://images.unsplash.com/photo-1546349851-64285be8e9fa?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>

这个示例提供了 WebP 和 AVIF 等替代图片格式。

Background Image

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

组件选项

这些选项都可以应用到组件属性上。多个选项之间用分号分隔。了解更多

选项 值 默认 描述
dataSrc String 图片的 src 属性。
sources String 图片的来源。该选项仅用于背景图片。单个来源的属性以 key: value; 格式传入。多个来源则使用 JSON 格式。
loading String lazy 启用懒加载/立即加载。对首个可见视口内的图片设置为 eager。
margin String 50% 在与图片计算相交之前，添加到视口边界框上的外边距。取值必须以 px 或 % 为单位。
target String false 目标列表，其边界框将用于与图片计算相交。默认为图片本身。

dataSrc 是 Primary 选项，如果属性值中只有这一个选项，可以省略其键名。

JavaScript

了解更多关于 JavaScript 组件 的信息。

初始化

UIkit.img(element, options);

注意 Image 组件会在 Session Storage 中记录已加载的图片。它借此判断某张图片是否已被缓存。已缓存的图片会立即加载，不经过懒加载机制，以避免任何渲染闪烁。在测试 Image 组件之前，请务必从浏览器的 Session Storage 中清除这些记录。