效果图
既然来了，把妹子都给你。
定义
懒加载，前端人都知道的一种性能优化方式，简单的来说，只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。
实现原理
监听页面的
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="{{item.show ? 'active': ''}}" src="{{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
来获取节点信息。
