|
|
|
|
移动端

性能更优越的小程序图片懒加载方式

懒加载或者可以说是延迟加载,针对非首屏或者用户"看不到"的地方延迟加载,有利于页面首屏加载速度快、节约了流量,用户体验好。

作者:jayzou来源:segmentfault|2018-08-02 14:08

技术沙龙 | 邀您于8月25日与国美/AWS/转转三位专家共同探讨小程序电商实战

性能更优越的小程序图片懒加载方式

意义

懒加载或者可以说是延迟加载,针对非首屏或者用户"看不到"的地方延迟加载,有利于页面首屏加载速度快、节约了流量,用户体验好。

实现方式

传统H5的懒加载方式都是通过监听页面的scroll事件来实现的,结合viewport的高度来判断。

小程序也类似,通过监听页面onPageScroll事件获取当前滚动的数据,结合getSystemInfo获取设备信息来判断。由于scroll事件密集发生,计算量很大,经常会造成FPS降低、页面卡顿等问题。

这里说的是通过另外一种方式来实现

createIntersectionObserver

小程序基础库 1.9.3 开始支持,了解下

  节点布局交叉状态API可用于监听两个或多个组件节点在布局位置上的相交状态。这一组API常常可以用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。

API涉及到的概念总共有5个

  • 参照节点:监听的参照节点,取它的布局区域作为参照区域。如果有多个参照节点,则会取它们布局区域的 交集 作为参照区域。页面显示区域也可作为参照区域之一。
  • 目标节点:监听的目标,默认只能是一个节点(使用 selectAll 选项时,可以同时监听多个节点)。
  • 相交区域:目标节点的布局区域与参照区域的相交区域。
  • 相交比例:相交区域占参照区域的比例。
  • 阈值:相交比例如果达到阈值,则会触发监听器的回调函数。阈值可以有多个。

通过以上API和概念的了解,可以获取到图片是否可以被用户看见或者即将被看见,通过回调将图片加载显示出来,然后监听下一组即将被显示的图片,这样就可以达到懒加载图片的方式,以下是代码展示

  1. //index.js  
  2. //获取应用实例  
  3. const app = getApp()  
  4. let lazyload;  
  5. Page({  
  6.     data: {  
  7.         classNote: 'item-',                    //循环节点前缀  
  8.         count: 0,                              //总共加载到多少张  
  9.         img: []                                //图片列表  
  10.     },  
  11.     onReady: function () {  
  12.         //可以先初始化首屏需要展示的图片  
  13.         that.setData({  
  14.             count: 5  
  15.         })  
  16.         //开始监听节点,注意需要在onReady才能监听,此时节点才渲染  
  17.         lazyload.observe();  
  18.     },  
  19.     viewPort: function () {  
  20.         const that = this;  
  21.         var intersectionObserver = wx.createIntersectionObserver();  
  22.         //这里bottom:100,是指显示区域以下 100px 时,就会触发回调函数。  
  23.         intersectionObserver.relativeToViewport({bottom: 100}).observe(this.data.classNote + this.data.count, (res) => {  
  24.             if(res.boundingClientRect.top > 0){  
  25.                 intersectionObserver.disconnect()  
  26.                 that.setData({  
  27.                     count: that.data.count + 5  
  28.                 })  
  29.                 that.viewPort();  
  30.             }  
  31.         })  
  32.     }  
  33. })  
  34.  
  35. //page.wxml  
  36. <view 
  37.     <view wx:for="{{img}}" class="item-{{index}}" 
  38.         <image style="display: {{index < count ? 'block' : 'none'}}" src="{{item}}"></image>  
  39.     </view 
  40. </view

这里有3点需要注意的

  1. 监听的节点需要先渲染,也就是说监听这个动作需要在onReady的时候
  2. 上述示例监听是依赖循环节点的class,最少需要先渲染一个节点才能监听
  3. 每次监听完一个循环节点后,结束监听,然后继续监听下一个节点

结果

无论怎么快速滚动,FPS都能保持在60

总结

H5其实也有一个类似的API,小程序的使用方式跟H5也是很类似,有很多东西都可以参考。针对上述监听的方式,我这边简单封装了一个库来调用,欢迎star。

【编辑推荐】

  1. 七天速成小程序——喜马拉雅
  2. 五个最热门的开源机器学习JavaScript框架
  3. JavaScript异步图像上传
  4. 2018年推出的10个JavaScript动画库
  5. 重新认识JavaScript面向对象:从ES5到ES6
【责任编辑:庞桂玉 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

Linux指令速查手册

Linux是一款开源的操作系统,得到了广大开发者的青睐。掌握Linux系统的指令及其用法是学习Linux系统的基础。本书详细地介绍了常用Linux指令...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊