小程序中图片懒加载的两种实现方法及懒加载概念

本篇文章给大家带来的内容是关于什么是懒加载？小程序中图片懒加载的两种实现方法 ，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

定义

懒加载，前端人都知道的一种性能优化方式，简单的来说，只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。

实现原理

监听页面的scroll事件,判读元素距离页面的top值是否是小于等于页面的可视高度

判断逻辑代码如下

element.getBoundingClientRect()-

我们知道小程序页面的脚本逻辑是在JsCore中运行，JsCore是一个没有窗口对象的环境，所以不能在脚本中使用window，也无法在脚本中操作组件。

所以关于图片懒加载就需要在数据上面做文章了。

页面

页面上面只需要根据数据的某一个字段来判断是否显示图片就可以了，字段为Boolean类型，当为false的时候显示默认图片就行了。

代码大概长成这样

布局跟简单，view组件里面有个图片，并循环list，有多少就展示多少

image组件的src字段通过每一项的show来进行绑定，active是加了个透明的过渡

样式

逻辑

本位主要讲解懒加载，所以把数据写死在页面上了

数据结构如下：

我们使用两种方式来实现懒加载，准备好没有，一起来快乐的撸码吧。

WXML节点信息

小程序支持调用createSelectQuery创建一个SelectorQuery实例，并使用select方法来选择节点，并通过boundingClientRect来获取节点信息。

显示结果如下

悄悄告诉你，小程序里面有个onPageScroll函数，是用来监听页面的滚动的。
还有个getSystemInfo函数，可以获取获取系统信息，里面包含屏幕的高度。

接下来，思路就透彻了吧。还是上面的逻辑， 扒拉扒拉直接写代码就行了,这里只写下主要的逻辑

我们主要使用intersectionRatio进行判断，当它大于0时说明是相交的也就是可见的。

先来波测试题，请说出下面的函数做了什么，并且log函数会执行几次

duang，揭晓答案。

第一个以当前页面的视窗监听了.box组件，log会触发两次，一次是进入页面一次是离开页面

第二个以.box节点的布局区域监听了.item组件，log会触发两次，一次是进入页面一次是离开页面

第三个以当前页面的视窗监听了.box组件，log只会在节点可见的时候触发

好了，题也做了，API你也掌握了，相信你已经可以使用IntersectionObserver来实现图片懒加载了吧，主要逻辑如下

最后

至此，我们使用两种方式实现了小程序版本的图片懒加载，可以发现，使用IntersectionObserver来实现不要太酸爽。

以上就是小程序中图片懒加载的两种实现方法及懒加载概念的详细内容！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。