微信小程序之图片懒加载

前言：因为小程序各种交互限制，为了实现这常用的功能，不怎么用小程序的俺把小程序开发文档看了几遍，挑了感觉可以用上的进行测试，还网上搜了别人做的，网上的基本都是死定的尺寸，死定的数据，死定的页面，适用性比较差，所以，花了一天半时间，终于测通了一条路。

开始的失败之路：getIntersectionObserver，刚看到1.9.3+的版本有这方法的时候，心里一阵高兴，感觉就是js的IntersectionObserver，结果折腾了差不多一天，失败告终。原因有：
　　1.它只能监听一个选择器(js原生的可监听N个dom，小程序没dom，只有选择器），比如js中的querySelector，并且不能是querySelectorAll。这就只能给image打唯一的id了，一对一呗。理论上感觉是可以了。但是。。。
　　2.它不能监听组件内的image，也就是选择器选不进去。。。反正俺测试没通过。所以只能用在page下的image，不能用在component的。。。丢了component，小程序就没什么意义了。
　　故，目前放弃了getIntersectionObserver。等抠抠那帮死人折腾到999.999.999版本再说吧。

getIntersectionObserver是走不通了，image的lazy-load属性在文档上就一句话（太恶心了！），并且只能用在scroll-view内，直接不考虑了，限制多，用途窄，没鬼用！

先上个效果图，图中是组件效果，共7张图。右边是selectAll()的数组（数量）

--------------------- 进入主题 -----------------------------
　　最后想到了,wx.createSelectorQuery().selectAll()，它可以选择多个节点，主要是，它能选组件内的节点。虽然它是有限制条件的。
　　限制条件（个人测，不完整）
　　只能是#id，或.class，不能是标签名，也不能是属性。但id和类名已经够用了，不行我们就加个类名给标签呗。
　　选组件内节点示例
componentA.wxml文件示范

list.wxml文件示范

　　选择器
　　wx.createSelectorQuery().selectAll(".a>>>.loading"); //可选中组件A中的image
　　如果想连.con也一起选，可这样写
　　wx.createSelectorQuery().selectAll(".a>>>.loading,.con"); //这跟js的差不多一样。

　　节点选出来了。接下来是获得节点信息。
　　获取节点位置信息语法

节点位置信息出来了，接下来得判断是否进入可视区域，也就是屏幕。

获取屏幕信息
因为我们是上拉加载，所以要高度信息就行了。

有了节点位置信息，也有了屏高。作进入可视区判断
可视判断

　　想触发图片加载，小程序只能改变数据，也就是this.setData(data)。
　　因为节点跟js交互基本就id和dataset，所以，在这里，我考虑的是用dataset记下数据地址。
　　记录数据地址
假如 list.js代码如下（部分）

　　(本思路不支持 list:["a.jpg","b.jpg"]这种字符串记录的方式）

list.wxml为：

　　其中data-addr记录的是当前图片的数据地址（组件同理，传值就好），同时给记录假设了两个属性：
　　1._lazyload_complete是否完成，默认肯定是没完成，等图片load后设为true。其还有一作用，就是去掉loading状态，同时也去掉了selectAll(".loading")里的匹配。
　　2._lazyload是否已经加载，默认是未加载。等进入可视区域就设为true.

　　进入可视区哉，改变_lozyload值
　　补完执行位置代码：

　　改变image.src的显示后，等图片加载完后，去掉loading状态，
　　小程序的image也只有一个load事件可用，这就绑上事件。
　　绑上懒加载完成事件

list.js

完整的list.js代码：

　　最后，由于小程序的Page无prototype属性，故扩展封装时，只能自己另起一工具包，给page赋于lazyload的能力即可。
　　具体封装也不在这写了，js好点的人都会的。

　　完整源码迟点有时间再上传

　　 over!