mina-lazy-image

小程序图片懒加载自定义组件

背景

​小程序原生图片组件 image 提供的图片懒加载功能 lazy-load 限制过多，只针对 page 与 scroll-view 下的 image 有效。

实现思路

使用 wx.createIntersectionObserver() 判断图片是否出现在视口中并进行加载

使用方法

1. 安装组件

npm install --save mina-lazy-image

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

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

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

1. 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