跳到主要内容

文档

图像

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

图像组件模拟了 <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-1485627941502-d2e6429a8af0?fit=crop&w=650&h=433&q=80"
     data-srcset="https://images.unsplash.com/photo-1485627941502-d2e6429a8af0?fit=crop&w=650&h=433&q=80 650w,
                  https://images.unsplash.com/photo-1485627941502-d2e6429a8af0?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 参数的 source 属性。

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

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