小程序图片懒加载(-)

定义

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

实现原理

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

判断逻辑代码如下

element.getBoundingClientRect().top <= document.documentElement.clientHeight ? 显示 : 默认

我们知道小程序页面的脚本逻辑是在JsCore中运行，JsCore是一个没有窗口对象的环境，所以不能在脚本中使用window，也无法在脚本中操作组件。所以关于图片懒加载就需要在数据上面做文章了。

页面

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

逻辑

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

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

WXML节点信息

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

wx.createSelectorQuery().select('.item').boundingClientRect((ret)=>{
	console.log(ret)
}).exec()
 

显示结果如下

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

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

至此，我们完成了一个小程序版的图片懒加载

转载：https://juejin.im/post/5a7973575188257a5911a749