跳到主要内容

文档

图像

使用带有延迟加载、响应式图像和不同图像来源的背景图像

图像组件模拟了浏览器 <img> 元素的特性，但用于背景图像。这包括 loading="lazy"、srcset 和 sizes 属性，以及来自 <picture> 元素的 <source> 元素。这通过仅在背景图像进入视口时加载它们来加快页面加载时间并减少流量。优化的背景图像用于不同的设备宽度和高分辨率（视网膜）显示器。

用法

要应用此组件，请将包含背景图像的图像路径的 uk-img 和 data-src 属性添加到 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="https://images.unsplash.com/photo-1490822180406-880c226c150b?fit=crop&w=650&h=433&q=80" uk-img>
  <h1>Background Image</h1>
</div>

急切加载

为了避免对第一个可见视口的背景图像进行延迟加载，但仍使用此组件的其他功能，请将 loading="eager" 参数添加到 uk-img 属性。

<div data-src="" uk-img="loading: eager">…</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-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>

背景图像

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

图片来源

要像包含 <source> 元素的 <picture> 元素一样使用不同的图像来源，请添加具有 srcset、media 和 type 参数的 sources 属性。

<div sources="srcset: ____; media: ____" data-src="" uk-img>…</div>

<div sources="srcset: ____; type: ____" data-src="" uk-img>…</div>

背景图像

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

背景图像

<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*。

背景图像

<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 字符串 图像的 src 属性。
sources 字符串 图像的来源。此选项仅用于背景图像。源属性以 key: value; 格式传递，用于单个来源。对于 JSON 格式的多个来源。
loading 字符串 lazy 启用延迟/急切加载。 对于第一个可见视口内的图像，设置为 eager。
margin 字符串 50% 边距将添加到视口的边界框，然后再计算与图像的交集。 该值必须以 px 或 % 为单位。
target 字符串 false 目标列表，其边界框将用于计算与图像的交集。 默认为图像本身。

dataSrc 是主要选项，如果它是属性值中唯一的选项，则可以省略其键。

JavaScript

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

初始化

UIkit.img(element, options);

注意图像组件会在会话存储中记录已加载的图像。这就是它尝试确定图像是否已被缓存的方式。缓存的图像会立即加载，而无需延迟加载机制，以防止任何渲染闪烁。在测试图像组件之前，请确保从浏览器的会话存储中清除这些记录。