图片

通过仅在进入视口时才加载图片，来加快页面加载时间和减少流量消耗。

图片组件通过以下方法来显著提升页面速度：

初始只加载位于视口中的图片。
滚动页面其他图片进入视口时被延迟加载。
会立即生成空的占位符图片，以防止在图像加载或尚未加载到视口中时页面跳跃。
可选项：占位符图像可以拥有任何类型的背景或预加载动画。

图片组件支持img 元素和CSS background-image 属性。支持图片的 srcset属性，以及创建用于不同的设备宽度和高分辨率(retina)显示的最佳图像。图片组件甚至可以在CSSbackground-image内使用srcset 。

用法

要应用此组件，请将uk-img 属性添加到<img>元素，并将data-前缀添加到src 属性，以便读取data-src.

<img data-src="" width="" height="" alt="" uk-img>

width 和 height 属性是必须的，以便生成和图片宽高完全相同的空占位符。如果您不想设置显式属性，请使用data-width和data-height。

<img data-src="/skin/ukv3/images/light.jpg" width="1800" height="1200" alt="" uk-img>

内联SVG

要延迟加载使用 SVG 组件作为内联SVG注入的SVG图像，请确保在该组件属性中使用data-src 选项，而不是作为data属性。

<img width="" height="" alt="" uk-img="data-src:" uk-svg>

Srcset

要使用srcset属性，只需将其前缀设为data-srcset.

<img data-src="" data-srcset="" sizes="" width="" height="" alt="" uk-img>

<img data-src="https://images.unsplash.com/photo-1522201949034-507737bce479?fit=crop&w=650&h=433&q=80"
     data-srcset="https://images.unsplash.com/photo-1522201949034-507737bce479?fit=crop&w=650&h=433&q=80 650w,
                  https://images.unsplash.com/photo-1522201949034-507737bce479?fit=crop&w=1300&h=866&q=80 1300w"
     sizes="(min-width: 650px) 650px, 100vw" width="650" height="433" alt="" uk-img>

背景图像

要将此组件与CSSbackground-image属性一起使用，请将其添加到<div>或任何其他元素中。

<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="/skin/ukv3/images/photo.jpg" uk-img>
  <h1>Background Image</h1>
</div>

带Srcset的背景图像

图像组件允许您对背景图像使用srcset。只需添加data-srcset属性。如果需要sizes 属性，那么其前缀为data-sizes.

<div data-src="" data-srcset="" data-sizes="" 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"
     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"
     data-sizes="(min-width: 650px) 650px, 100vw" uk-img>
    <h1>Background Image</h1>
</div>

目标

通常，图像在进入视口后就开始加载。要基于另一个元素的视口可见性开始加载图像，请使用target选项。这对于在Slideshow 和 Slider 组件中延迟加载图像非常有用。

<img data-src="" width="" height="" alt="" uk-img="target: .my-class">

下面的示例将在幻灯片放映进入视扣后立即加载幻灯片中的所有图像。它使用!.uk-slideshow-items作为目标选择器。!查找DOM来找到下一个带有.uk-slideshow-items类的父元素。

<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow>

    <ul class="uk-slideshow-items">
        <li>
            <img data-src="/skin/ukv3/images/photo.jpg" width="1800" height="1200" alt="" uk-cover uk-img="target: !.uk-slideshow-items">
        </li>
        <li>
            <img data-src="/skin/ukv3/images/dark.jpg" width="1800" height="1200" alt="" uk-cover uk-img="target: !.uk-slideshow-items">
        </li>
        <li>
            <img data-src="/skin/ukv3/images/light.jpg" width="1800" height="1200" alt="" uk-cover uk-img="target: !.uk-slideshow-items">
        </li>
    </ul>

    <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
    <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>

</div>

加载上一个和下一个

也可以只加载活动幻灯片的图像，而延迟加载其他幻灯片的图像。只需使用target: !* -*, !* +*选项将每个图像的上一张和下一张幻灯片定位。有两个例外，您必须选择第一张和最后一张幻灯片。

Selector	Description
`!* -*`	查找直接父级(`!`)，然后选择前一个元素 (`-`)。
`!* +*`	查找直接父级(`!`) 然后选择后面的元素 (`+`).
`!.uk-slideshow-items > :last-child`	查找具有`.uk-slideshow-item` 类的下一个父元素，然后选择最后一个子元素。
`!.uk-slideshow-items > :first-child`	查找具有`.uk-slideshow-item`该类的下一个父元素，然后选择第一个子元素。

<ul class="uk-slideshow-items">
    <li>
        <img data-src="" width="" height="" alt="" uk-img="target: !ul > :last-child, !* +*">
    </li>
    <li>
        <img data-src="" width="" height="" alt="" uk-img="target: !* -*, !* +*">
    </li>
    <li>
        <img data-src="" width="" height="" alt="" uk-img="target: !* -*, !* +*">
    </li>
    <li>
        <img data-src="" width="" height="" alt="" uk-img="target: !* -*, !ul > :first-child">
    </li>
</ul>

<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow>

    <ul class="uk-slideshow-items">
        <li>
            <img data-src="/skin/ukv3/images/photo.jpg" width="1800" height="1200" alt="" uk-cover uk-img="target: !ul > :last-child, !* +*">
        </li>
        <li>
            <img data-src="/skin/ukv3/images/dark.jpg" width="1800" height="1200" alt="" uk-cover uk-img="target: !* -*, !* +*">
        </li>
        <li>
            <img data-src="/skin/ukv3/images/light.jpg" width="1800" height="1200" alt="" uk-cover uk-img="target: !* -*, !ul > :first-child">
        </li>
    </ul>

    <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
    <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>

</div>

自定义占位符

默认情况下，占位符图像是透明的。使img[data-src][src*='data:image']选择器添加自定义背景或预加载动画。

img[data-src][src*='data:image'] { background: rgba(0,0,0,0.1); }

组件选项

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

Option	Value	Default	Description
`dataSrc`	String	''	The image's `src` attribute.
`dataSrcset`	String	false	The image's `srcset` attribute.
`sizes`	String	false	The image's `sizes` attribute.
`width`	String	false	The image's `width` attribute. It will be used to determine the placeholder's width and the position of the image in the document.
`height`	String	false	The image's `height` attribute. It will be used to determine the placeholder's height and the position of the image in the document.
`offsetTop`	String	'50vh'	The offset increases the viewport's bounding box vertically before computing an intersection with the image.
`offsetLeft`	String	0	The offset increases the viewport's bounding box horizontally before computing an intersection with the image.
`target`	String	false	A list of targets who's bounding boxes will be used to compute an intersection with the image. Defaults to the image itself.

JavaScript

了解JavaScript 组件的更多内容。

初始化

UIkit.img(element, options);

UIkit3.x文档

Background Image

Background Image