当前位置:微信小程序开发 > 小程序资讯 > 小程序开发教程 > 微信小程序图片懒加载的实现方案

微信小程序图片懒加载的实现方案

2018-09-17 17:55 来源: 霸界科技

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

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

 
微信小程序图片懒加载的实现方案
 
  实现原理
 
  监听页面的scroll事件,判读元素距离页面的top值是否是小于等于页面的可视高度
 
  判断逻辑代码如下
 
  element.getBoundingClientRect().top <= document.documentElement.clientHeight ? 显示 : 默认
 
  我们知道小程序页面的脚本逻辑是在JsCore中运行,JsCore是一个没有窗口对象的环境,所以不能在脚本中使用window,也无法在脚本中操作组件。
 
  所以关于图片懒加载就需要在数据上面做文章了。
 
  WXML节点信息
 
  小程序支持调用createSelectQuery创建一个SelectorQuery实例,并使用select方法来选择节点,并通过boundingClientRect来获取节点信息。
 
  wx.createSelectorQuery().select('.item').boundingClientRect((ret)=>{
 
  console.log(ret)
 
  }).exec()
 
  悄悄告诉你,小程序里面有个onPageScroll函数,是用来监听页面的滚动的。
 
  还有个getSystemInfo函数,可以获取获取系统信息,里面包含屏幕的高度。
 
  接下来,思路就透彻了吧。还是上面的逻辑, 扒拉扒拉直接写代码就行了,这里只写下主要的逻辑,完整代码请戳文末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]),指定页面显示区域为参照区域
 
  4、intersectionObserver.observer(targetSelector, callback),参数为指定监听的节点和一个回调函数,目标元素的相交状态发生变化时就会触发此函数,callback函数包含一个result,下面再讲
 
  5、intersectionObserver.disconnect() 停止监听,回调函数不会再触发
 
  我们主要使用intersectionRatio进行判断,当它大于0时说明是相交的也就是可见的。
 
  先来波测试题,请说出下面的函数做了什么,并且log函数会执行几次
 
  1、
 
  wx.createIntersectionObserver().relativeToViewport().observer('.box', (result) => {
 
  console.log('监听box组件触发的函数')
 
  })
 
  2、
 
  wx.createIntersectionObserver().relativeTo('.box').observer('.item', (result) => {
 
  console.log('监听item组件触发的函数')
 
  })
 
  3、
 
  wx.createIntersectionObserver().relativeToViewport().observer('.box', (result) => {
 
  if(result.intersectionRatio > 0){
 
  console.log('.box组件是可见的')
 
  }
 
  })duang,揭晓答案。
 
  第一个以当前页面的视窗监听了.box组件,log会触发两次,一次是进入页面一次是离开页面
 
  第二个以.box节点的布局区域监听了.item组件,log会触发两次,一次是进入页面一次是离开页面
 
  第三个以当前页面的视窗监听了.box组件,log只会在节点可见的时候触发
 
  好了,题也做了,API你也掌握了,相信你已经可以使用IntersectionObserver来实现图片懒加载了吧,主要逻辑如下
 
  let group = this.data.group // 获取图片数组数据
 
  for (let i in this.data.group){   wx.createIntersectionObserver().relativeToViewport().observe('.item-'+ i, (ret) => {
 
  if (ret.intersectionRatio > 0){
 
  group[i].show = true
 
  }
 
  this.setData({
 
  group
 
  })
 
  })
 
  }至此,我们使用两种方式实现了小程序版本的图片懒加载,可以发现,使用IntersectionObserver来实现不要太酸爽。
分享到:
最新评论

网友:

验证码: 点击我更换图片

联系我们

业务咨询:15918761088

招商咨询:15918761088(微信同号)

周一至周五 9:30-18:30

公司地址:广州市海珠区昌岗中路166号富盈国际大厦2505室

官方微信 官方微博

Copyright © 2018 www.keji168.com 广州霸界网络科技有限公司版权所有 粤ICP备18083764号-1

客服
套餐咨询,合作细节等
在线客服
电话咨询
159-1876-1088