玖叶教程网

优点：

懒加载，针对非首屏或者不再窗口可视范围的内容进行延迟加载，有利于页面首屏加载速度快、优化体验

实现方式

传统的H5是通过监听scroll 去判断是否在屏幕内进行处理，当然小程序也有对应的通过监听滚动条的方式处理，getSystemInfo获取设备的信息 onPageScroll监听页面滚动，当然也可以通过组件<scroll-view scroll-y="true" bindscroll="scroll" ></scorll-view>的bindscroll监听

另外小程序还提供了api

createIntersectionObserver 基础库 1.9.3 开始支持，低版本需做兼容处理。

创建并返回一个 IntersectionObserver 对象实例。在自定义组件或包含自定义组件的页面中，应使用 this.createIntersectionObserver([options]) 来代替。

具体实现方法

Page({
  data: {
    　observer_status: true
  },
  onReady(){
    // 监听的节点需要先渲染，也就是说监听这个动作需要在onReady的时候
    // top: 300, bottom: 300 是指 在屏幕可见范围的向上300 向下300 先加载，
     this.observer = this.createIntersectionObserver().relativeToViewport({top: 300, bottom: 300});
     this.observer.observe('.component-observer', (res) => {
         this.observer_status = false;
         this.observer.disconnect()
			   this.observer = null
			})
  }
})

还有一个小程序image 组件提供的lazy-load 官方说明-图片懒加载，在即将进入一定范围（上下三屏）时才开始加载

使用方法也很简单

<image lazy-load="{{true}}" style="width: 200px; height: 200px;" mode="widthFix" src="你的图片链接"></image>