https://github.com/alexayan/mina-lazy-image
小程序图片懒加载组件
https://github.com/alexayan/mina-lazy-image
miniprogram
Last synced: 12 months ago
JSON representation
小程序图片懒加载组件
- Host: GitHub
- URL: https://github.com/alexayan/mina-lazy-image
- Owner: alexayan
- License: mit
- Created: 2018-11-14T07:17:02.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-11-28T00:31:11.000Z (over 6 years ago)
- Last Synced: 2025-03-18T08:14:55.457Z (over 1 year ago)
- Topics: miniprogram
- Language: JavaScript
- Size: 879 KB
- Stars: 7
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# mina-lazy-image
小程序图片懒加载自定义组件
## 背景
小程序原生图片组件 image 提供的图片懒加载功能 `lazy-load` 限制过多，只针对 page 与 scroll-view 下的 image 有效。
## 实现思路
使用 `wx.createIntersectionObserver()` 判断图片是否出现在视口中并进行加载
## 使用方法
1. 安装组件
```
npm install --save mina-lazy-image
```
2. 在页面的 json 配置文件中添加 mina-lazy-image
使用此组件需要依赖小程序基础库 2.2.2 版本，同时依赖开发者工具的 npm 构建。具体详情可查阅[官方 npm 文档](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html)。
```json
{
"usingComponents": {
"mina-lazy-image": "mina-lazy-image/index"
}
}
```
3. WXML 文件中引用 mina-lazy-image
```xml
```
**mina-lazy-image 的属性介绍如下：**
| 字段名 | 类型 | 必填 | 描述 |
| --------------------- | ------- | ---- | ----------------------------------------- |
| src | String | 是 | 图片链接 |
| placeholder | String | 否 | 占位图片链接 |
| mode | String | 否 | 请参考 image 组件 mode 属性 |
| webp | Number | 否 | 请参考 image 组件 webp 属性 |
| showMenuByLongpress | Boolean | 否 | 请参考 image 组件 show-menu-by-longpress 属性 |
| styles | String | 否 | 设置图片样式 |
| viewport | Object | 否 | 默认为 {bottom: 0}，配置图片显示区域 |
**mina-lazy-image 外部样式类**
`image-class`, `image-container-class`