指南

最近改动:

  • 因更换打包方式《引入对象或类型》路径发生改变,按最新文档为准
  • 新增 无感刷新
  • 优化源码
  • 解决秒关闪屏bug

介绍

Web 中实现 loading 的方式有很多种,例如使用css动画、js操作元素、gif图片、svg动画、ui框架中自带loading等等,各有所优,操作元素可能更方便,但会影响性能或其他元素,动态图片性能很好,但自定义不理想。

WebLoading 是一个基于 web 封装的loading动画插件,主要model是通过Canvas绘制,这种方式不会影响到界面中的元素,当然,WebLoading也提供了html配置兼容了html加载方式。默认的model模块都提供了独自的options配置属性,如果想更贴近业务可以使用Custom进行自定义,WebLoading提供了BaseModel 继承class让你更方便自定义自己的loading,或者html加载方式。

实现

WebLoading中每一个model都是使用Canvas绘制,启动方式分别有DOM(元素挂载)、FULL(全屏)、MINI(移动端)。

原理大同小异,这里以DOM来讲述,首先我们需要initLoading初始化你需要渲染的model并提供自定义参数,当然,这个操作不是必须的,因为WebLoading已经初始化所有的默认数据,此时抛出操作WebLoading相关函数。

启动WebLoading调用loading函数需要一个HtmlElement元素,该元素必须拥有children,而不是一个单标签元素。启动WebLoading时会获取到这个挂载的元素,并在children添加一个Canvas,同时会计算该元素位置以及大小以最优显示同步到Canvas上。WebLoading会根据options参数来绘制具体的modelmodel中主要以requestAnimationFrame来进行递归回调渲染,以此来实现每一帧动画。

注意:如果配置是通过html渲染,那么就不会走上一步。

WebLoading封装上主要分隔三层

  • 交互层:开发者与WebLoading的操作,例如初始化、启动、关闭、获取相关信息等等。
  • 逻辑层:获取到WebLoading接收options后进行初始化挂载的元素以及canvas等等。
  • model 层:继承BaseModel获取初始化后的canvas进行绘制模块。

安装

根据自己的包管理工具下载。

npm install web-loading

使用

CDN引入

<script src="https://cdn.jsdelivr.net/npm/web-loading"></script>
<script>
	const webLoading = window.fullLoading({})
    // initLoading、fullLoading、miniLoading都绑定在window上...
</script>

html例子入口

工程项目引入

import type { LoadingType } from "web-loading";
import { initLoading } from "web-loading";
let webLoading: LoadingType = initLoading({
  // 自定义options
})
  • 参数
    • options?:OptionsType
  • 返回
    • webLoading:LoadingType

获取元素

// 无框架情况
let dom = document.querySelector('xxx')
// vue
let dom = ref()
// ...如果是FULL或MINI不需要获取元素

启动

// 注意:在dom加载完成后再调用loading
window.onload = function () {
  webLoading.loading(dom)
}

参数

  • dom:挂载的HtmlElement元素

  • options?:OptionsType,支持覆盖options

启动方式

DOMFULLMINI三种启动方式都需要基于HtmlElement,这里FULLMINI是扩展的启动方式,参数中无须提供HtemlElment,是因为WebLoading已经处理的元素的创建到消失的流程。

import type { LoadingType } from "web-loading";
import { fullLoading,miniLoading LOADING_TYPES } from "web-loading";

let webLoading: LoadingType = fullLoading() // 全屏
// let webLoading: LoadingType = miniLoading() // 移动端

// 启动(如果是MINI或者FULL无需传递dom)
webLoading.loading()
上次更新:
贡献者: tommyrunner, 和楠