ion-img
ion-img 是一个图片标签,当元素进入视口时会懒加载图片。这在生成大型列表时特别有用,因为图片只在可见时才会加载。该组件内部使用 Intersection Observer,大多数现代浏览器都支持此特性,在不支持的浏览器中会自动回退到 setTimeout 方案。
基本用法
属性
alt
| Description | This attribute defines the alternative text describing the image. Users will see this text displayed if the image URL is wrong, the image is not in one of the supported formats, or if the image is not yet downloaded. |
| Attribute | alt |
| Type | string | undefined |
| Default | undefined |
src
| Description | The image URL. This attribute is mandatory for the <img> element. |
| Attribute | src |
| Type | string | undefined |
| Default | undefined |
事件
| Name | Description | Bubbles |
|---|---|---|
ionError | Emitted when the img fails to load | true |
ionImgDidLoad | Emitted when the image has finished loading | true |
ionImgWillLoad | Emitted when the img src has been set | true |
方法
No public methods available for this component.
CSS Shadow Parts
| Name | Description |
|---|---|
image | The inner img element. |
CSS 自定义属性
No CSS custom properties available for this component.
插槽
No slots available for this component.