详解性能更优越的小程序图片懒加载方式
时间:2018-07-18
这篇文章主要介绍了详解性能更优越的小程序图片懒加载方式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
意义
懒加载或者可以说是延迟加载,针对非首屏或者用户"看不到"的地方延迟加载,有利于页面首屏加载速度快、节约了流量,用户体验好
实现方式
传统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 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 分分钟教会你搭建企业级的 npm 私有仓库
- Golang语言之字符串操作
- Go语言ORM-gorm学习笔记(二)
- TypeScript: 常用的高级类型
- TypeScript:得泛型者,得天下
- 微信PC端多开的秘密
- Spring Cloud 微服务(七)- 上:日志收集集成
- Spring Cloud 微服务(七)- 下:日志收集详解
- Spring Cloud 微服务(八):链路追踪
- 一文带你网络安全 入门到入* [网络安全]
- 小白也能秒懂Vue源码中那些精细设计(选项处理)
- 软件品质评测系统-任务分发管理平台
- 彻底解决小程序无法触发SESSION问题
- 如何搭建前端异常监控系统
- JS+CSS 3实现图片滑块效果