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


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 相关文章推荐
HTML-CSS群中单选引发的“事件”
Mar 05 Javascript
CLASS_CONFUSION JS混淆 全源码
Dec 12 Javascript
javascript suggest效果 自动完成实现代码分享
Feb 17 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
Mar 05 Javascript
Js日期选择器并自动加入到输入框中示例代码
Aug 02 Javascript
借助javascript代码判断网页是静态还是伪静态
May 05 Javascript
JS实现超炫网页烟花动画效果的方法
Mar 02 Javascript
实现隔行换色效果的两种方式【实用】
Nov 27 Javascript
简单实现jquery隔行变色
Nov 09 jQuery
微信小程序利用Canvas绘制图片和竖排文字详解
Jun 25 Javascript
微信小程序换肤功能实现代码(思路详解)
Aug 25 Javascript
Vue3 响应式侦听与计算的实现
Nov 11 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中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
PHP内置的Math函数效率测试
2014/12/01 PHP
PHP5.6新增加的可变函数参数用法分析
2017/08/25 PHP
laravel 创建命令行命令的图文教程
2019/10/23 PHP
thinkphp5.1 框架导入/导出excel文件操作示例
2020/05/25 PHP
js通过地址栏给action传值(中文乱码全是问号)
2013/05/02 Javascript
深入分析原生JavaScript事件
2014/12/29 Javascript
表单验证正则表达式实例代码详解
2015/11/09 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
2016/08/26 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
2016/10/14 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
理解nodejs的stream和pipe机制的原理和实现
2017/08/12 NodeJs
AngularJS 中的数据源的循环输出
2017/10/12 Javascript
jQuery基于cookie实现换肤功能实例
2017/10/14 jQuery
详解vue项目打包后通过百度的BAE发布到网上的流程
2018/03/05 Javascript
vue.js 2.0实现简单分页效果
2019/07/29 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
2019/10/25 Javascript
JS数组方法join()用法实例分析
2020/01/18 Javascript
python中base64加密解密方法实例分析
2015/05/16 Python
python中urlparse模块介绍与使用示例
2017/11/19 Python
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
Python 修改列表中的元素方法
2018/06/26 Python
python selenium firefox使用详解
2019/02/26 Python
Python二次规划和线性规划使用实例
2019/12/09 Python
python连接PostgreSQL过程解析
2020/02/09 Python
Python实现一个简单的毕业生信息管理系统的示例代码
2020/06/08 Python
Python colormap库的安装和使用详情
2020/10/06 Python
如何利用CSS3制作3D效果文字具体实现样式
2013/05/02 HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
2020/05/26 HTML / CSS
网上开店必备创业计划书
2014/01/26 职场文书
促销活动总结怎么写
2014/06/25 职场文书
2014年个人委托书范本
2014/10/13 职场文书
2014党的群众路线教育实践活动总结材料
2014/10/31 职场文书
我的中国梦主题教育活动总结
2015/05/07 职场文书
python opencv检测直线 cv2.HoughLinesP的实现
2021/06/18 Python
springboot读取nacos配置文件
2022/05/20 Java/Android