UIkit3.x文档

图片

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

Image组件和<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等替代图像格式。

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

组件选项

这些选项中的任何一个都可以应用于组件属性。用分号分隔多个选项。了解更多

Option Value Default Description
dataSrc String '' 图片的src 属性。
dataSrcset String false 图片的srcset 属性。
sizes String false 图片的sizes 属性。
width String false 图片的 width 属性。它将用于确定占位符的宽度和图像在文档中的位置。
height String false 图片的 height 属性。它将用于确定占位符的高度和图像在文档中的位置。
offsetTop String '50vh' 在计算与图像的交点之前，偏移量会垂直增加视口的边界框。
offsetLeft String 0 在计算与图像的交点之前，偏移量会水平增加视口的边界框。
target String false 目标列表，其边界框将用于计算与图像的交集。默认为图像本身。

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

JavaScript

了解有关JavaScript 组件的更多内容。

初始化

UIkit.img(element, options);

NoteImage 组件将已加载图像的记录保存在 Session Storage（会话存储器） 中。这就是它确定图像是否已缓存的方式。如果是已缓存的图像，就会立即加载，而没有延迟加载机制来防止任何渲染闪烁。在测试 Image 组件之前，请先从浏览器的 Session Storage 中清除这些记录。