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


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 相关文章推荐
DIV+CSS+JS不间断横向滚动实现代码
Mar 19 Javascript
jquery之别踩白块游戏的简单实现
Jul 25 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
Sep 27 Javascript
node.js 和HTML5开发本地桌面应用程序
Dec 13 Javascript
将Sublime Text 3 添加到右键中的简单方法
Dec 12 Javascript
解决vue页面DOM操作不生效的问题
Mar 17 Javascript
vue组件实现可搜索下拉框扩展
Oct 23 Javascript
vue权限路由实现的方法示例总结
Jul 29 Javascript
js中调用微信的扫描二维码功能的实现代码
Apr 11 Javascript
JavaScript 中判断变量是否为数字的示例代码
Oct 22 Javascript
JavaScript setTimeout()基本用法有哪些
Nov 04 Javascript
基于JavaScript实现随机点名器
Feb 25 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实现小型站点广告管理
2006/10/09 PHP
PHP实现今天是星期几的几种写法
2013/09/26 PHP
PHP上传文件时文件过大$_FILES为空的解决方法
2013/11/26 PHP
Windows2003下php5.4安装配置教程(Apache2.4)
2016/06/30 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
php+ajax实现商品对比功能示例
2019/04/13 PHP
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
JavaScript方法和技巧大全
2006/12/27 Javascript
List Installed Software Features
2007/06/11 Javascript
JS运行耗时操作的延时显示方法
2010/11/19 Javascript
js获取网页高度(详细整理)
2012/12/28 Javascript
JavaScript中按位“异或”运算符使用介绍
2014/03/14 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
深入分析js的冒泡事件
2014/12/05 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
2016/02/18 Javascript
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
2016/08/02 Javascript
JSON键值对序列化和反序列化解析
2017/01/24 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
2017/02/22 Javascript
详解js几个绕不开的事件兼容写法
2017/08/30 Javascript
React中使用async validator进行表单验证的实例代码
2018/08/17 Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
2019/03/02 Javascript
python使用正则表达式替换匹配成功的组
2017/11/17 Python
SVM基本概念及Python实现代码
2017/12/27 Python
基于python实现简单日历
2018/07/28 Python
Atom Python 配置Python3 解释器的方法
2019/08/28 Python
Python编写单元测试代码实例
2020/09/10 Python
Python如何急速下载第三方库详解
2020/11/02 Python
基于Python组装jmx并调用JMeter实现压力测试
2020/11/03 Python
CSS3制作炫酷的自定义发光文字
2016/03/28 HTML / CSS
英国建筑用品在线:Building Supplies Online(BSO)
2018/04/30 全球购物
中药专业大学生医药工作求职信
2013/10/25 职场文书
确保工程质量承诺书
2015/04/29 职场文书
安全温馨提示语大全
2015/07/14 职场文书
无故旷工检讨书
2015/08/15 职场文书
私人贷款担保书该怎么写呢?
2019/07/02 职场文书