就是懒加载或者可以说是延迟加载。延迟加载针对的是不在首屏或者用户“看不到”的地方，有利于页面首屏的快速加载，省钱。流量大，用户体验好。实现方式传统的H5懒加载方式是通过监听页面的滚动事件，结合视口的高度进行判断来实现的。小程序也类似，通过监听页面的onPageScroll事件获取当前滚动数据，结合getSystemInfo获取设备信息进行判断。由于滚动事件的密集发生，计算量大，往往会导致FPS降低、页面卡顿等问题。这里用另一种方式实现createIntersectionObserver小程序基础库1.9.3的支持，了解节点布局交集状态API可以用来监控两个或多个组件节点在布局位置的交集状态。这套API经常可以用来推断某些节点是否可以被用户看到，用户可以看到的百分比是多少。API中涉及的概念一共有5个参考节点：监控参考节点，其布局区域作为参考区域。如果有多个参考节点，则将它们的布局区域的交集作为参考区域。页面显示区域也可以作为参考区域之一。目标节点：监控的目标，默认只能是一个节点（使用selectAll选项时，可以同时监控多个节点）。交集区域：目标节点的布局区域与参考区域的交集区域。交点比：交点面积与参考面积之比。阈值：如果交集比例达到阈值，就会触发监听器的回调函数。可以有多个阈值。通过以上API和概念的理解，可以得到图片是否可以被用户看到或者即将看到，通过回调加载显示图片，然后监听下一组要显示的图片，所以这样就可以实现图片的懒加载了。,下面是代码展示//index.js//获取应用实例constapp=getApp()letlazyload;Page({data:{classNote:'item-',//循环节点前缀count:0,//多少加载总张img:[]//图片列表},onReady:function(){//可以先初始化需要首屏显示的图片that.setData({count:5})//开始监听节点，注意需要监听onReady时节点渲染lazyload.observe();},viewPort:function(){constthat=this;varintersectionObserver=wx.createIntersectionObserver();//这里bottom:100意思是当显示区域在100px以下时，会触发回调。intersectionObserver.relativeToViewport({bottom:100}).observe(this.data.classNote+this.data.count,(res)=>{if(res.boundingClientRect.top>0){intersectionObserver.disconnect()that.setData({count:that.data.count+5})that.viewPort();}})}})//page.wxml
