微信小程序之图片懒加载

原创 hugeannex 教程 呵呵 471阅读 2018-04-03 10:16:07 举报

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

开始的失败之路: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!

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复