uniapp的图片添加懒加载插件及使用

UniApp 的图片懒加载插件主要是为了提高应用程序性能，避免一次性加载所有图片导致的页面初始化慢。常见的 UniApp 懒加载插件有uni-image-loader 和 vue-lazyload 等。下面是使用步骤简述：

1. **uni-image-loader**:
- 首先，在项目中安装插件：`npm install uni-image-loader`
- 在 Vue 组件模板里，将需要懒加载的 `<img>` 标签换成它的组件形式，如：

     <u- 在数据选项中配置图片源：

data() {
return {
imgSrc: 'default_placeholder.jpg',
}
},
methods: {
lazyLoadImage(url) {
this.$nextTick(() => {
this.imgSrc = url;
});
}
},

2. **vue-lazyload**:
   - 安装插件：`npm install vue-lazyload`
   - 在模板中使用 `vue-lazy-img` 或 `v-lazy` 组件：

<vue-lazy-img :src="'default_placeholder.png'" @load="imageLoaded"></vue-lazy-img>

   - 通过 `imageLoaded` 函数处理图片加载完成：

methods: {
imageLoaded(e) {
e.target.src = e.src; // 替换占位图为实际图片地址
}
}