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


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 相关文章推荐
window.open()弹出居中的窗口
Feb 01 Javascript
JS学习之一个简易的日历控件
Mar 24 Javascript
Javascript中的默认参数详解
Oct 22 Javascript
Javascript中innerHTML用法实例分析
Jan 12 Javascript
AngularJS中的模块详解
Jan 29 Javascript
理解javascript中try...catch...finally
Dec 25 Javascript
Knockout自定义绑定创建方法
Dec 26 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
Jan 27 Javascript
jquery使用FormData实现异步上传文件
Oct 25 jQuery
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
Oct 31 Javascript
详解一个小实例理解js原型和继承
Apr 24 Javascript
微信小程序实现分页加载效果
Nov 19 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如何解决无法上传大于8M的文件问题
2014/03/10 PHP
php禁用函数设置及查看方法详解
2016/07/25 PHP
PHP实现浏览器中直接输出图片的方法示例
2018/03/14 PHP
jQuery 行级解析读取XML文件(附源码)
2009/10/12 Javascript
jQuery 表单验证扩展(三)
2010/10/20 Javascript
js实现的仿新浪微博完美的时间组件升级版
2011/12/20 Javascript
浅析js中2个等号与3个等号的区别
2013/08/06 Javascript
获得Javascript对象属性个数的示例代码
2013/11/21 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
js定时器(执行一次、重复执行)
2014/03/07 Javascript
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
浅析Node.js中的内存泄漏问题
2015/06/23 Javascript
AngularJS之依赖注入模拟实现
2016/08/19 Javascript
在javaScript中检测数据类型的几种方式小结
2017/03/04 Javascript
ES6中数组array新增方法实例总结
2017/11/07 Javascript
vue: WebStorm设置快速编译运行的方法
2018/10/18 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
2020/09/16 Javascript
[01:02:05]LGD vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python实现堆排序的方法详解
2016/05/03 Python
python3大文件解压和基本操作
2017/12/15 Python
python对视频画框标记后保存的方法
2018/12/07 Python
python 3.3 下载固定链接文件并保存的方法
2018/12/18 Python
Django2 连接MySQL及model测试实例分析
2019/12/10 Python
Windows系统下pycharm中的pip换源
2020/02/23 Python
python3安装OCR识别库tesserocr过程图解
2020/04/02 Python
PatPat德国:妈妈的每日优惠
2019/10/02 全球购物
俄罗斯Sportmarket体育在线商店:用于旅游和户外活动
2019/11/12 全球购物
土建专业大学生自荐信范文
2014/04/09 职场文书
教研处工作方案
2014/05/26 职场文书
学生党员公开承诺书
2014/05/28 职场文书
事业单位财务人员岗位职责
2015/04/14 职场文书
2016大一新生入学教育心得体会
2016/01/23 职场文书
Linux安装apache服务器的配置过程
2021/11/27 Servers
python中的3种定义类方法
2021/11/27 Python