Github: https://github.com/alexayan/mina-lazy-image

功能

图片在视口中出现才进行加载显示，优化页面性能

使用方法

1. 安装组件

npm install --save mina-lazy-image

2. 在页面的 json 配置文件中添加 mina-lazy-image

使用此组件需要依赖小程序基础库 2.2.2 版本，同时依赖开发者工具的 npm 构建。具体详情可查阅官方 npm 文档。

{
  "usingComponents": {
    "mina-lazy-image": "mina-lazy-image/index"
  }
}

3. WXML 文件中引用 mina-lazy-image

   <mina-lazy-image src="{{src}}" mode="widthFIx" image-class="custom-class-name"/>
   

   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