微信小程序图片懒加载如何实现

这篇文章主要介绍“微信小程序图片懒加载如何实现”，在日常操作中，相信很多人在微信小程序图片懒加载如何实现问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”微信小程序图片懒加载如何实现”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
懒加载，前端人都知道的一种性能优化方式，简单的来说，只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。
监听页面的scroll事件,判读元素距离页面的top值是否是小于等于页面的可视高度
判断逻辑代码如下
element.getBoundingClientRect().top

我们知道小程序页面的脚本逻辑是在JsCore中运行，JsCore是一个没有窗口对象的环境，所以不能在脚本中使用window，也无法在脚本中操作组件。
我们使用两种方式来实现懒加载，准备好没有，一起来快乐的撸码吧。
小程序支持调用createSelectQuery创建一个SelectorQuery实例，并使用select方法来选择节点，并通过boundingClientRect来获取节点信息。
悄悄告诉你，小程序里面有个onPageScroll函数，是用来监听页面的滚动的。

还有个getSystemInfo函数，可以获取获取系统信息，里面包含屏幕的高度。
接下来，思路就透彻了吧。还是上面的逻辑， 扒拉扒拉直接写代码就行了,这里只写下主要的逻辑，完整代码请戳文末github
至此，我们完成了一个小程序版的图片懒加载，只是思维转变了下，其实并没有改变实现方式。我们来学些新的东西吧。
节点相交状态是啥？它是一个新的API，叫做IntersectionObserver, 本文只讲解简单的使用
小程序里面给它的定义是节点布局交叉状态API可用于监听两个或多个组件节点在布局位置上的相交状态。这一组API常常免费云主机域名可以用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。
里面设计的概念主要有五个，分别为
参照节点：以某参照节点的布局区域作为参照区域，参照节点可以有多个，多个话参照区域取它们的布局区域的交集
目标节点：监听的目标，只能是一个节点
相交区域：目标节点与参照节点的相交区域
相交比例：目标节点与参照节点的相交比例
阈值：可以有多个，默认为[0], 可以理解为交叉比例，例如[0.2, 0.5]
关于它的API有五个，依次如下
1、createIntersectionObserver([this], [options])，见名知意,创建一个IntersectionObserver实例
2、intersectionObserver.relativeTo(selector, [margins]), 指定节点作为参照区域，margins参数可以放大缩小参照区域，可以包含top、left、bottom、right四项
3、intersectionObserver.relativeToViewport([margin])，指定页面显示区域为参照区域
4、intersectionObserver.observer(targetSelector, callback)，参数为指定监听的节点和一个回调函数，目标元素的相交状态发生变化时就会触发此函数，callback函数包含一个result，下面再讲
5、intersectionObserver.disconnect()停止监听，回调函数不会再触发
我们主要使用intersectionRatio进行判断，当它大于0时说明是相交的也就是可见的。
先来波测试题，请说出下面的函数做了什么，并且log函数会执行几次
duang，揭晓答案。
第一个以当前页面的视窗监听了.box组件，log会触发两次，一次是进入页面一次是离开页面
第二个以.box节点的布局区域监听了.item组件，log会触发两次，一次是进入页面一次是离开页面
第三个以当前页面的视窗监听了.box组件，log只会在节点可见的时候触发
好了，题也做了，API你也掌握了，相信你已经可以使用IntersectionObserver来实现图片懒加载了吧，主要逻辑如下
至此，我们使用两种方式实现了小程序版本的图片懒加载，可以发现，使用IntersectionObserver来实现不要太酸爽。到此，关于“微信小程序图片懒加载如何实现”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注百云主机网站，小编会继续努力为大家带来更多实用的文章！

相关推荐: vue中引入mousewheel事件及兼容性处理方式的示例分析

小编给大家分享一下vue中引入mousewheel事件及兼容性处理方式的示例分析，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！项目实现过程中需要对一个已经有纵向滚动条的table表格增加鼠标滚轮（mousewheel）事件，方便查看数据；其实…