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


Posted in Javascript onJuly 18, 2018

意义

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

实现方式

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

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

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

createIntersectionObserver

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

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

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

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

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

//index.js
//获取应用实例
const app = getApp()

let lazyload;

Page({
  data: {
    classNote: 'item-',          //循环节点前缀
    count: 0,               //总共加载到多少张
    img: []                //图片列表
  },
  onReady: function () {
    //可以先初始化首屏需要展示的图片
    that.setData({
      count: 5
    })
    //开始监听节点,注意需要在onReady才能监听,此时节点才渲染
    lazyload.observe();
  },
  viewPort: function () {
    const that = this;
    var intersectionObserver = wx.createIntersectionObserver();
    //这里bottom:100,是指显示区域以下 100px 时,就会触发回调函数。
    intersectionObserver.relativeToViewport({bottom: 100}).observe(this.data.classNote + this.data.count, (res) => {
      if(res.boundingClientRect.top > 0){
        intersectionObserver.disconnect()
        that.setData({
          count: that.data.count + 5
        })
        that.viewPort();
      }
    })
  }

})
//page.wxml

<view>
  <view wx:for="{{img}}" class="item-{{index}}">
    <image style="display: {{index < count ? 'block' : 'none'}}" src="{{item}}"></image>
  </view>
</view>

这里有2点需要注意的

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

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

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

总结

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
再论Javascript的类继承
Mar 05 Javascript
Extjs单独定义各组件的实例代码
Jun 25 Javascript
js算法中的排序、数组去重详细概述
Oct 14 Javascript
js使用html()或text()方法获取设置p标签的显示的值
Aug 01 Javascript
Vue.js每天必学之内部响应式原理探究
Sep 07 Javascript
JS实现针对给定时间的倒计时功能示例
Apr 11 Javascript
用vue封装插件并发布到npm的方法步骤
Oct 18 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
Mar 13 Javascript
微信小程序使用swiper组件实现类3D轮播图
Aug 29 Javascript
koa+mongoose实现简单增删改查接口的示例代码
May 13 Javascript
Vue解析剪切板图片并实现发送功能
Feb 04 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
Apr 24 Javascript
微信小程序项目实践之验证码倒计时功能
Jul 18 #Javascript
微信小程序日期选择器实例代码
Jul 18 #Javascript
JavaScript实现的反序列化json字符串操作示例
Jul 18 #Javascript
Angularjs实现多图片上传预览功能
Jul 18 #Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
Jul 18 #Javascript
微信小程序scroll-x失效的完美解决方法
Jul 18 #Javascript
详解easyui基于 layui.laydate日期扩展组件
Jul 18 #Javascript
You might like
php查找指定目录下指定大小文件的方法
2014/11/28 PHP
PHP屏蔽关键字实现方法
2016/11/17 PHP
window resize和scroll事件的基本优化思路
2014/04/29 Javascript
JS实现模拟风力的雪花飘落效果
2015/05/13 Javascript
基于JavaScript实现动态创建表格和增加表格行数
2015/12/20 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
2016/05/31 Javascript
confirm确认对话框的实现方法总结
2016/06/17 Javascript
JavaScript实现in-place思想的快速排序方法
2016/08/07 Javascript
关于jquery form表单序列化的注意事项详解
2017/08/01 jQuery
JavaScript中防止微信浏览器被整体拖动的方法
2017/08/25 Javascript
layui radio性别单选框赋值方法
2018/08/15 Javascript
Vuex mutitons和actions初使用详解
2019/03/04 Javascript
node.js的http.createServer过程深入解析
2019/06/06 Javascript
webpack4 optimization使用总结
2019/11/10 Javascript
Vue的props父传子的示例代码
2020/05/20 Javascript
js实现前端界面导航栏下拉列表
2020/08/27 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
2020/11/09 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
浅谈Python2之汉字编码为unicode的问题(即类似\xc3\xa4)
2019/08/12 Python
基于Tensorflow一维卷积用法详解
2020/05/22 Python
如何利用Python 进行边缘检测
2020/10/14 Python
自定义Django_rest_framework_jwt登陆错误返回的解决
2020/10/18 Python
python里反向传播算法详解
2020/11/22 Python
美国高品质个性化珠宝销售网站:Jewlr
2018/05/03 全球购物
iostream与iostream.h的区别
2015/01/16 面试题
什么是触发器(trigger)? 触发器有什么作用?
2013/09/18 面试题
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2014/01/19 面试题
财务会计专业应届毕业生求职信
2013/10/18 职场文书
学习十八大报告感言
2014/02/04 职场文书
王力宏牛津大学演讲稿
2014/05/22 职场文书
幼儿园安全责任书范本
2014/07/24 职场文书
感恩祖国演讲稿
2014/09/09 职场文书
成绩报告单家长评语
2014/12/30 职场文书
介绍信样本
2015/01/31 职场文书
2015年成本会计工作总结
2015/10/14 职场文书