xtf-lazyload

组件说明

xtf-lazyload 是图片懒加载组件，使用 IntersectionObserver 实现图片进入视口时才加载。支持占位图、骨架屏、加载失败重试和自定义尺寸，适用于长列表图片和商品图片等场景。

---

基础用法

1. 基础用法

通过 src 设置图片地址，通过 threshold 设置提前加载距离：

<template>
  <scroll-view scroll-y style="height: 100vh">
    <xtf-lazyload
      v-for="item in imageList"
      :key="item.id"
      :src="item.url"
      width="100%"
      :height="400"
      radius="20"
    />
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      imageList: [
        { id: 1, url: '/static/img1.jpg' },
        { id: 2, url: '/static/img2.jpg' },
        { id: 3, url: '/static/img3.jpg' }
      ]
    }
  }
}
</script>

2. 带占位图

通过 placeholder 设置占位图：

<template>
  <xtf-lazyload
    src="/static/large-image.jpg"
    placeholder="/static/placeholder.png"
    width="100%"
    :height="500"
  />
</template>

<script>
export default {
  data() {
    return {}
  }
}
</script>

3. 自定义加载与错误状态

通过具名插槽替换内置加载和错误内容，并使用 error 事件记录失败原因：

<template>
  <xtf-lazyload src="/static/missing.jpg" :height="240" @error="handleError">
    <template #loading><xtf-loading text="正在加载图片" /></template>
    <template #error><xtf-text text="图片暂不可用" color="secondary" align="center" /></template>
  </xtf-lazyload>
</template>

<script>
export default {
  methods: {
    handleError(event) {
      console.log('图片加载失败：', event)
    }
  }
}
</script>

---

全部属性

属性	类型	默认值	作用描述	适用范围
src	String	''	图片地址	图片
placeholder	String	''	占位图地址	占位
errorImg	String	''	错误占位图	错误
threshold	String | Number	100	提前加载距离(rpx)	触发
fit	String	'aspectFill'	填充模式	模式
alt	String	''	图片描述	无障碍
width	String | Number	'100%'	宽度	尺寸
height	String | Number	300	高度	尺寸
radius	String | Number	'var(--xtf-radius-md)'	圆角	样式
round	Boolean	false	是否圆形	形状
customClass	String	''	自定义类名	样式覆盖
customStyle	String | Object	''	自定义样式	动态样式覆盖

---

事件

事件名称	触发时机	回调参数	参数说明
load	图片加载完成时触发	(event)	原生 image 的加载事件
error	图片加载失败时触发	(event)	原生 image 的错误事件

---

插槽

插槽名称	说明
loading	自定义加载中状态
error	自定义错误状态

---

主题说明

• 加载中使用骨架屏闪烁动画
• 错误状态使用 xtf-icon 组件

如需全局调整主题，请在 xtf-config-provider 或主题配置中覆盖相关 CSS 变量。