详细讲解性能优越的小程序图片的偷懒加载方式

意义

延迟加载可以说是延迟加载。对于不是第一屏或者用户看不到的地方延迟加载，有利于页面第一屏的快速加载，节省流量，用户体验好

实施方式

H5传统的惰性加载模式是通过监控页面的滚动事件来实现的，滚动事件是通过视口的高度来判断的。

小程序也类似，可以通过监控页面的onPageScroll事件得到当前的滚动数据，结合getSystemInfo得到设备信息进行判断。由于滚动事件的密集发生，计算量非常大，往往会造成FPS降低、页面堵塞等问题。

这里所说的是以另一种方式实现它

创建交叉数据库服务器

小程序基础库1.9.3开始支持，了解

节点布局相交状态API可用于监听布局位置中两个或多个组件节点的相交状态。这组API通常可以用来推断某些节点是否可以被用户看到，以及用户可以看到的百分比是多少。API涉及五个概念

参考节点：被监控的参考节点，其布局区域作为参考区域。如果有多个参考节点，它们的布局区域的交点将作为参考区域。页面显示区域也可以用作参考区域之一。目标节点：默认情况下，监控的目标只能是一个节点(使用selectAll选项时，可以同时监控多个节点)。相交区域：目标节点布局区域与参考区域的相交区域。相交比：相交面积与参考面积之比。阈值：如果交集比达到阈值，将触发监听器回调函数。可以有多个阈值。通过对以上API和概念的理解，可以得到图片是否能被用户看到或者即将被看到，通过回调加载显示图片，然后收听下一组要显示的图片，这样就可以实现图片的懒加载。以下是代码显示

//index.js//获取应用程序实例const app=getApp()让lazyloadpage({ data : { class note : ' item-'，//循环节点前缀count33600，//总共加载了多少个img 3360[]//图片})，OnReady:函数(){//可以初始化需要在第一屏显示的图片({ count : 5 })//开始监听节点。请注意，您需要打开准备监听，然后节点将呈现lazyload . observe()；}，viewPort:函数(){ const thatvar intersectionbserver=wx . createintersectionbserver()；//这里，bottom:100表示回调函数在显示区下方100px时被触发。intersectionbserver . relativetoviewport({ bottom : 100 })。observe(this . data . class note this . data . count，(RES)={ if(RES . boundingclientrect . top 0){ intersectionbserver . disconnect()that . setdata({ count : that . data . count 5 })that . viewport()；} })} }))//page . wxmlview view wx : for=' { { img } } ' class=' item-{ { index } } ' image style=' display : { { index count？block ' : ' none ' } } ' src=' http : { { item } } '/image/view/view这里有两点需要注意

被监控的节点需要先渲染，也就是说当监控这个动作需要onReady的时候，上面的示例监控依赖于循环节点的类，至少需要先渲染一个节点进行监控。在监控每个环路节点之后，监控结束，然后继续监控下一个节点结果。

无论你滚动得多快，FPS都可以保持在60

摘要

H5其实也有类似的API，小程序的使用方式和H5很像，所以有很多东西可以参考。针对上面提到的监控方法，我简单封装了一个库进行调用。欢迎来到星空。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。