bootstraptable treeGrid 懒加载_为 Vue 的惰性加载加一个进度条
简介
通常用 编写单页应用(SPA)时,当加载页面时,所有必需的资源(如 JavaScript 和 CSS 文件)都会被一起加载。在处理大文件时,这可能会导致用户体验不佳。
借助 Webpack,可以用 import() 函数而不是 import 关键字在 中按需加载页面。
为什么要按需加载?
中 SPA 的典型工作方式是将所有功能和资源打包一并交付,这样可以使用户无需刷新页面即可使用你的应用。如果你没有为了按需加载页面针对自己的应用进行明确的设计,那么所有的页面会被立即加载,或者提前使用大量内存进行不必要的预加载。
这对有许多页面的大型 SPA 非常不利,会导致使用低端手机和低网速的用户体验会很差。如果通过按需加载,用户将不需要下载他们当前不需要的资源。
没有为动态模块提供任何加载指示器相关的控件。即使进行了预取和预加载,也没有对应的空间让用户知道加载的过程,所以还需要通过添加进度条来改善用户体验。
准备项目
首先需要一种让进度条与 Vue Router 通信的方法。事件总线模式比较合适。
事件总线是一个 Vue 实例的单例。由于所有 Vue 实例都有一个使用 $on和 $emit的事件系统,因此可以用它在应用中的任何地方传递事件。
首先在 components 目录中创建一个新文件 :
import Vue from 'vue' export default new Vue()
然后把 Webpack 配置为禁用预取和预加载,这样就可以针对每个函数单独执行此类操作,当然你也可以全局禁用它。在根文件夹中创建一个 文件并添加禁用预取和预加载的相关配置:
= { chainWebpack: (config) => { // 禁用预取和预加载 ('prefetch') ('preload') }, }
添加路由和页面
用 npx 安装 Vue router 并使用:
$ npx vue add router
编辑位于 router/ 下的 router 文件并更新路由,以便可以用 import() 函数代替 import 语句:
以下默认配置:
import About from '../views/' { path: '/about', name: 'About', component: About },
将其改为:
{ path: '/about', name: 'About', component: () => import('../views/') },
如果希望可以选择按需加载某些页面,而不是全局禁用预取和预加载,可以用特殊的 Webpack 注释,不要在 中配置 Webpack:
import( /* webpackPrefetch: true */ /* webpackPreload: true */ '../views/' )
import() 和 import 之间的主要区别是在运行时加载由 import() 加载的 ES 模块,在编译时加载由 import 加载的 ES 模块。这就意味着可以用 import() 延迟模块的加载,并仅在必要时加载。
实现进度条
由于无法准确估算页面的加载时间(或完全加载),因此我们无法真正的去创建进度条。也没有办法检查页面已经加载了多少。不过可以创建一个进度条,并使它在页面加载时完成。
由于不能真正反映进度,所以描绘的进度只是进行了随机跳跃。
先安装 ,因为在生成进度条的过程中将会用这个包产生一些随机数:
$ npm i
然后,创建一个 Vue 组件 components/:
<template> <div :class="{'loading-container': true, loading: isLoading, visible: isVisible}"> <div class="loader" :style="{ width: progress + '%' }"> <div class="light"></div> </div> <div class="glow"></div> </div> </template>
接下来向该组件添加脚本。在脚本中先导入 random 和 $eventHub,后面会用到:
<script> import random from '' import $eventHub from '../components/eventHub' </script>
导入之后,在脚本中定义一些后面要用到的变量:
// 假设加载将在此时间内完成。 const defaultDuration = 8000 // 更新频率 const defaultInterval = 1000 // 取值范围 0 - 1. 每个时间间隔进度增长多少 const variation = 0.5 // 0 - 100. 进度条应该从多少开始。 const startingPoint = 0 // 限制进度条到达加载完成之前的距离 const endingPoint = 90
然后编码实现异步加载组件的逻辑:
export default { name: 'ProgressBar', data: () => ({ isLoading: true, // 加载完成后,开始逐渐消失 isVisible: false, // 完成动画后,设置 display: none progress: startingPoint, timeoutId: undefined, }), mounted() { $eventHub.$on('asyncComponentLoading', ) $eventHub.$on('asyncComponentLoaded', ) }, methods: { start() { = true = true = startingPoint () }, loop() { if () { clearTimeout() } if ( >= endingPoint) { return } const size = (endingPoint - startingPoint) / (defaultDuration / defaultInterval) const p = Math.round( + random(size * (1 - variation), size * (1 + variation))) = Math.min(p, endingPoint) = setTimeout( , random(defaultInterval * (1 - variation), defaultInterval * (1 + variation)) ) }, stop() { = false = 100 clearTimeout() const self = this setTimeout(() => { if (!) { = false } }, 200) }, }, }
在 mounted() 函数中,用事件总线来侦听异步组件的加载。一旦路由告诉我们已经导航到尚未加载的页面,它将会开始加载动画。
最后其添加一些样式:
<style scoped> .loading-container { font-size: 0; position: fixed; top: 0; left: 0; height: 5px; width: 100%; opacity: 0; display: none; z-index: 100; transition: opacity 200; } . { display: block; } . { opacity: 1; } .loader { background: #23d6d6; display: inline-block; height: 100%; width: 50%; overflow: hidden; border-radius: 0 0 5px 0; transition: 200 width ease-out; } .loader > .light { float: right; height: 100%; width: 20%; background-image: linear-gradient(to right, #23d6d6, #29ffff, #23d6d6); animation: loading-animation 2s ease-in infinite; } .glow { display: inline-block; height: 100%; width: 30px; margin-left: -30px; border-radius: 0 0 5px 0; box-shadow: 0 0 10px #23d6d6; } @keyframes loading-animation { 0% { margin-right: 100%; } 50% { margin-right: 100%; } 100% { margin-right: -10%; } } </style>
最后将 ProgressBar 添加到 或布局组件中,只要它与路由视图位于同一组件中即可,它在应用的整个生命周期中都可用:
<template> <div> <progress-bar></progress-bar> <router-view></router-view> </div> </template> <script> import ProgressBar from './components/' export default { components: { ProgressBar }, } </script>
然后你就可以在页面顶端看到一个流畅的进度条:
页面顶端的进度条
为延迟加载触发进度条现在 ProgressBar 正在事件总线上侦听异步组件加载事件。当某些资源以这种方式加载时应该触发动画。现在向路由添加一个路由守护来接收以下事件:
import $eventHub from '../components/eventHub' ((to, from, next) => { if (typeof [0]?. === 'function') { $eventHub.$emit('asyncComponentLoading', to) // 启动进度条 } next() }) ((to, from, next) => { $eventHub.$emit('asyncComponentLoaded') // 停止进度条 next() })
为了检测页面是否被延迟加载了,需要检查组件是不是被定义为动态导入的,也就是应该为 component:() => import('...') 而不是component:MyComponent。
这是通过 typeof [0]?. === 'function'完成的。带有 import 语句的组件不会被归为函数。
总结
在本文中,我们禁用了在 Vue 应用中的预取和预加载功能,并创建了一个进度条组件,该组件可显示以模拟加载页面时的实际进度。
【责任编辑:
赵宁宁
TEL:(010)68476606】
点赞 0
bootstraptable treeGrid 懒加载_为 Vue 的惰性加载加一个进度条相关推荐
- vue路由懒加载_优化vue项目的首屏加载速度
最近使用vue-cli3构建了一个小型的博客系统,完工之后,build打包出来发现一个chunk-vendors包就有1.1m,部署上去之后,访问的时候,首屏加载非常慢.居然需要21s,体验极差. 这 ...
- vue aplayer 进度条无法拖动_为 Vue 的惰性加载加一个进度条
// 每日前端夜话 第412篇// 正文共:1800 字// 预计阅读时间:8 分钟 简介 通常用 Vue.js 编写单页应用(SPA)时,当加载页面时,所有必需的资源(如 JavaScript 和 ...
- html动态资源加载进度,JavaScript_快速解决js动态改变dom元素属性后页面及时渲染的问题,今天实现一个进度条加载过程 - phpStudy...
快速解决js动态改变dom元素属性后页面及时渲染的问题 今天实现一个进度条加载过程,dom结构其实就是两个div 控制里层div的宽width属性,就能实现进度条往前走的效果. 我的进度条是显示下载文 ...
- vue.js 利用canvas绘制仪表盘圆环进度条-带动画
vue.js 利用canvas绘制简易仪表盘进度条 html代码 因为动画效果比较消耗性能,所以进度条单独canvas绘制 <template><div class="ci ...
- bootstraptable treeGrid 懒加载_Java类加载机制及自定义加载器
一:ClassLoader类加载器,主要的作用是将class文件加载到jvm虚拟机中.jvm启动的时候,并不是一次性加载所有的类,而是根据需要动态去加载类,主要分为隐式加载和显示加载. 隐式加载:程序 ...
- android 加载动画素材,八种APP启动界面的Loading进度条设计动效方案
在移动端APP应用中,从用户点击图标那一瞬间到用户进入主界面这段过程,同样也决定用户对该APP应用的第一印象,如何让用户产生好感并快速熟悉应用是这一阶段重点考虑的问题.这一过程是否给用户留下好的第一饮 ...
- vue 自定义组件:ProcessBar (堆叠式进度条)
使用vue做界面的时候需要用到类似bootstrap堆叠式进度条,前台使用ElementUI,为了防止有样式冲突,自己定义一个类似这样的进度条. <template><div id= ...
- vue 自定义指令实现,滚动条百分比进度条。
您可以戳这里查看演示效果 v-progress.js import "./v-progress.css";const scrollInit = (dom, opts, progre ...
- 仿YouToBe给页面顶部加一个进度条
http://jsfiddle.net/42NYX/ 首先是css部分 我们需要一个div,也就是进度条的div div {position: absolute;top: 0px;left: 0px; ...
最新文章
- 1067. 试密码(20)
- 大型Web应用的数据库设计与部署
- mysql 插入_Mysql中创建表格及插入数据
- Java 怎么 get char_Java KeyCharacterMap.getDeadChar方法代码示例
- mysqladmin mysql,mysql,mysqladmin,mysqld之间的区别
- html5步骤条,自定义步骤条 , 纯原生html + css
- 禁用当前的账户win7_系统小技巧:服务客人 开启Windows 10来宾账户
- 微信公众平台消息接口开发(34)微信墙之表白墙/婚礼墙/晚会墙/会议墙/晒单墙/照片墙/历史墙...
- magento邮件使用php,用Magento的Email模板机制发邮件
- 在Ubuntu系统下进行引导修复
- 芝士超人复活卡软件多线程版本
- 计网实验二——以太帧、IP报文分析
- 大转盘抽奖活动的设计
- Elasticsearch 6.4 ingest-attachment对office文件IK分词器全文检索(1) HttpAPI使用
- 新型勒索软件Phobos利用弱安全性攻击目标
- 一流在线课程申报表公共计算机,衡阳财经业职业技术学院精品课程建设申报表.doc...
- 【历史上的今天】6 月 12 日:美国进入数字化电视时代;Mozilla 的最初开发者出生;3Com 和美国机器人公司合并
- 计算机专业相关的职业技术证书有哪些,你知道吗?
- Android 9.0系统源码_SystemUI(九)PhoneWindowManager构建状态栏和导航栏视图窗口区域坐标的流程解析
- windows远程桌面 远程服务器繁忙,win10系统提示“由于远程桌面服务当前正忙,无法完成...”的解决方法...
热门文章
- VtigerCRM收件箱邮件打开失败JSLBL_Failed_To_Open_Email
- Java中多态的粗浅见解
- 西瓜视频这20亿,砸的是什么?
- Linux基础第二部分。done
- colorkey口红怎么样_colorkey小众品牌口红唇釉效果好吗 – 爱分享
- 恢复出厂设置android手机号码,安卓手机恢复出厂设置会怎么样?
- android手机照片恢复,安卓手机照片怎么恢复?简单恢复方法分享
- 牛客练习赛87 -A-中位数
- 李阳英语228句口语要素 +校园英语迷你惯用语 +1000句最常用英语口语
- 启动三个线程,线程1打印1-5,线程2打印6-10,线程3打印11-15,接着线程1打印16-20……依此类推,打印到72.