前言：
现时同学们对“h5图片懒加载”都比较关注，姐妹们都想要剖析一些“h5图片懒加载”的相关资讯。那么小编同时在网摘上收集了一些对于“h5图片懒加载””的相关资讯，希望看官们能喜欢，小伙伴们快快来了解一下吧！传统H5的懒加载方式都是通过监听页面的scroll事件来实现的，结合viewport的高度来判断。小程序也类似，通过监听页面onPageScroll事件获取当前滚动的数据，结合getSystemInfo获取设备信息来判断。由于scroll事件密集发生，计算量很大，经常会造成FPS降低、页面卡顿等问题。这里说的是通过另外一种方式来实现。
createIntersectionObserver
节点布局交叉状态API可用于监听两个或多个组件节点在布局位置上的相交状态。这一组API常常可以用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。
API涉及到的概念总共有5个
参照节点：监听的参照节点，取它的布局区域作为参照区域。如果有多个参照节点，则会取它们布局区域的 交集 作为参照区域。页面显示区域也可作为参照区域之一。目标节点：监听的目标，默认只能是一个节点（使用 selectAll 选项时，可以同时监听多个节点）。相交区域：目标节点的布局区域与参照区域的相交区域。相交比例：相交区域占参照区域的比例。阈值：相交比例如果达到阈值，则会触发监听器的回调函数。阈值可以有多个。
通过以上API和概念的了解，可以获取到图片是否可以被用户看见或者即将被看见，通过回调将图片加载显示出来，然后监听下一组即将被显示的图片，这样就可以达到懒加载图片的方式，以下是代码展示：
这里有2点需要注意的
监听的节点需要先渲染，也就是说监听这个动作需要在onReady的时候上述示例监听是依赖循环节点的class，最少需要先渲染一个节点才能监听每次监听完一个循环节点后，结束监听，然后继续监听下一个节点
结果:无论怎么快速滚动，FPS都能保持在60.
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #h5图片懒加载
