推荐下载
-
2020-05-12 浏览：789
-
2020-04-04 浏览：654
-
2020-05-06 浏览：560
-
2020-05-08 浏览：545
-
2020-05-12 浏览：543
小程序之图片懒加载【完美方案，你不来看看】
发布时间:2020-10-25效果图
既然来了，把妹子都给你。
定义
懒加载，前端人都知道的一种性能优化方式，简单的来说，只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。
实现原理监听页面的scroll事件,判读元素距离页面的top值是否是小于等于页面的可视高度
判断逻辑代码如下
element.getBoundingClientRect().top <= document.documentElement.clientHeight ? 显示 : 默认
我们知道小程序页面的脚本逻辑是在JsCore中运行，JsCore是一个没有窗口对象的环境，所以不能在脚本中使用window，也无法在脚本中操作组件。
所以关于图片懒加载就需要在数据上面做文章了。
页面上面只需要根据数据的某一个字段来判断是否显示图片就可以了，字段为Boolean类型，当为false的时候显示默认图片就行了。
代码大概长成这样
<view wx:for="{{list}}" class='item item-{{index}}' wx:key="{{index}}"> <image class=http://www.yiyongtong.com/archives/"{{item.show ? 'active': ''}}" src=http://www.yiyongtong.com/archives/"{{item.show ? item.src : item.def}}"></image> </view>布局跟简单，view组件里面有个图片，并循环list，有多少就展示多少
image组件的src字段通过每一项的show来进行绑定，active是加了个透明的过渡
样式 image{ transition: all .3s ease; opacity: 0; } .active{ opacity: 1; } 逻辑本位主要讲解懒加载，所以把数据写死在页面上了
数据结构如下：
我们使用两种方式来实现懒加载，准备好没有，一起来快乐的撸码吧。
WXML节点信息小程序支持调用createSelectQuery创建一个SelectorQuery实例，并使用select方法来选择节点，并通过boundingClientRect来获取节点信息。
wx.createSelectorQuery().select('.item').boundingClientRect((ret)=>{ console.log(ret) }).exec()显示结果如下
接下来，思路就透彻了吧。还是上面的逻辑， 扒拉扒拉直接写代码就行了,这里只写下主要的逻辑，完整代码请戳文末github
showImg(){ let group = this.data.group let height = this.data.height // 页面的可视高度 wx.createSelectorQuery().selectAll('.item').boundingClientRect((ret) => { ret.forEach((item, index) => { if (item.top <= height) { 判断是否在显示范围内 group[index].show = true // 根据下标改变状态 } }) this.setData({ group }) }).exec() } onPageScroll(){ // 滚动事件 this.showImg() }至此，我们完成了一个小程序版的图片懒加载，只是思维转变了下，其实并没有改变实现方式。我们来学些新的东西吧。
节点布局相交状态节点相交状态是啥？它是一个新的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])，指定页面显示区域为参照区域
