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


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 相关文章推荐
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
Jan 06 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
May 07 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
Jun 29 Javascript
Jquery选择器中使用变量实现动态选择例子
Jul 25 Javascript
Vue.js一个文件对应一个组件实践
Oct 27 Javascript
详解Angular4中路由Router类的跳转navigate
Jun 09 Javascript
vue中将网页打印成pdf实例代码
Jun 15 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
Dec 13 Javascript
Vue.js实现可配置的登录表单代码详解
Mar 29 Javascript
jquery分页插件pagination使用教程
Oct 23 jQuery
vue实现日历备忘录功能
Sep 24 Javascript
JavaScript实现商品评价五星好评
Nov 30 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事务rollback&amp;commit示例
2010/02/08 PHP
PHP模块memcached使用指南
2014/12/08 PHP
PHP中list()函数用法实例简析
2016/01/08 PHP
PHP如何实现订单的延时处理详解
2017/12/30 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
Yii2.0框架实现带分页的多条件搜索功能示例
2019/02/20 PHP
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
2013/01/24 Javascript
js获取location.href的参数实例代码
2013/08/02 Javascript
javascript实现yield的方法
2013/11/06 Javascript
jquery 缓存问题的几个解决方法
2013/11/11 Javascript
jquery操作checked属性以及disabled属性的多种方法
2014/06/20 Javascript
jQuery不兼容input的change事件问题解决过程
2014/12/05 Javascript
JavaScript中Date.toSource()方法的使用教程
2015/06/12 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
详解JavaScript常量定义
2017/01/03 Javascript
TypeScript入门-基本数据类型
2017/03/28 Javascript
angular.fromJson与toJson方法用法示例
2017/05/17 Javascript
jQuery、layer实现弹出层的打开、关闭功能
2017/06/28 jQuery
React复制到剪贴板的示例代码
2017/08/22 Javascript
基于JavaScript实现报警器提示音效果
2017/10/27 Javascript
基于JavaScript实现单例模式
2019/10/30 Javascript
原生jQuery实现只显示年份下拉框
2020/12/24 jQuery
python音频处理用到的操作的示例代码
2017/10/27 Python
利用python实现简单的邮件发送客户端示例
2017/12/23 Python
Python OpenCV读取png图像转成jpg图像存储的方法
2018/10/28 Python
opencv实现静态手势识别 opencv实现剪刀石头布游戏
2019/01/22 Python
python之当你发现QTimer不能用时的解决方法
2019/06/21 Python
python爬虫筛选工作实例讲解
2020/11/23 Python
python中random模块详解
2021/03/01 Python
GAP美国官网:美国休闲时尚品牌
2016/08/26 全球购物
优秀经理获奖感言
2014/03/04 职场文书
原料仓管员岗位职责
2015/04/01 职场文书
2015年国庆节新闻稿
2015/07/18 职场文书
少先队大队委竞选口号
2015/12/25 职场文书
2016年大学生党员承诺书
2016/03/24 职场文书