# 图片／Image

<p class="uk-text-lead">通过仅在进入视口时才加载图片，来加快页面加载时间和减少流量消耗。</p>

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

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

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

***

## Usage-用法

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

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

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

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

### 内联SVG

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

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

***

## Srcset

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

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

```example
<img data-src="images/photo-srcset.jpeg"
     data-srcset="images/photo-srcset-small.jpeg 650w,
                  images/photo-srcset-big.jpeg 1300w"
     sizes="(min-width: 650px) 650px, 100vw" width="650" height="433" alt="" uk-img>

```

***

## Background image-背景图像

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

```html
<div data-src="" uk-img>...</div>
```

```example
<div class="uk-height-medium uk-flex uk-flex-center uk-flex-middle uk-background-cover uk-light" data-src="images/photo.jpg" uk-img>
  <h1>Background Image</h1>
</div>
```

***

### 带Srcset的背景图像

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

```html
<div data-src="" data-srcset="" data-sizes="" uk-img>...</div>
```

```example
<div class="uk-height-medium uk-flex uk-flex-center uk-flex-middle uk-background-cover uk-light"
     data-src="images/photo-srcset.jpeg"
     data-srcset="images/photo-srcset-small.jpeg 650w,
                  images/photo-srcset-big.jpeg 1300w"
     data-sizes="(min-width: 650px) 650px, 100vw" uk-img>
    <h1>Background Image</h1>
</div>
```

***

## Target-目标

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

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

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

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

    <ul class="uk-slideshow-items">
        <li>
            <img data-src="images/photo.jpg" width="1800" height="1200" alt="" uk-cover uk-img="target: !.uk-slideshow-items">
        </li>
        <li>
            <img data-src="images/dark.jpg" width="1800" height="1200" alt="" uk-cover uk-img="target: !.uk-slideshow-items">
        </li>
        <li>
            <img data-src="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: !* -*, !* +*` 选项将每个图像的上一张和下一张幻灯片定位。有两个例外，您必须选择第一张和最后一张幻灯片。

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

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

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

    <ul class="uk-slideshow-items">
        <li>
            <img data-src="images/photo.jpg" width="1800" height="1200" alt="" uk-cover uk-img="target: !ul > :last-child, !* +*">
        </li>
        <li>
            <img data-src="images/dark.jpg" width="1800" height="1200" alt="" uk-cover uk-img="target: !* -*, !* +*">
        </li>
        <li>
            <img data-src="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>
```

***

## Custom placeholder-自定义占位符

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

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

***

## Component options-组件选项

下面这些选项中的任何一个都可以应用于组件属性。用分号分隔多个选项。 [了解更多](javascript.md#component-configuration)

| 选项       | 可用值  | 默认值 | 描述                                                                                 |
|:-------------|:-------|:--------|:----------|
| `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 组件](javascript.md#programmatic-use)的更多内容。

### 初始化

```js
UIkit.img(element, options);
```

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