/mina-lazy-image

小程序图片懒加载组件

Primary LanguageJavaScriptMIT LicenseMIT

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