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

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

主要介绍了详解性能更优越的小程序图片懒加载方式，小编觉得挺不错的，现在分享给大家，也给大家做个参

考。一起跟随小编过来看看吧

意义意义

懒加载或者可以说是延迟加载，针对非首屏或者用户"看不到"的地方延迟加载，有利于页面首屏加载速度快、节约了流量,用户

体验好

实现方式实现方式

传统H5的懒加载方式都是通过监听页面的scroll事件来实现的，结合viewport的高度来判断。

些节点是否可以被用户看见、有多大比例可以被用户看见。

API涉及到的概念总共有5个

参照节点：监听的参照节点，取它的布局区域作为参照区域。如果有多个参照节点，则会取它们布局区域的 交集 作为参

照区域。页面显示区域也可作为参照区域之一。

目标节点：监听的目标，默认只能是一个节点（使用 selectAll 选项时，可以同时监听多个节点）。

相交区域：目标节点的布局区域与参照区域的相交区域。

相交比例：相交区域占参照区域的比例。

阈值：相交比例如果达到阈值，则会触发监听器的回调函数。阈值可以有多个。

通过以上API和概念的了解，可以获取到图片是否可以被用户看见或者即将被看见，通过回调将图片加载显示出来，然后监听

下一组即将被显示的图片，这样就可以达到懒加载图片的方式，以下是代码展示

classNote: 'item-', //循环节点前缀

count: 0, //总共加载到多少张

img: [] //图片列表

},

onReady: function () {

//可以先初始化首屏需要展示的图片

that.setData({

count: 5

})

//开始监听节点，注意需要在onReady才能监听，此时节点才渲染

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();

}

})

}