这次给大家带来懒加载过程中添加loading,懒加载过程中添加loading的注意事项有哪些,下面就是实战案例,一起来看一下。
用过vue-router都知道它可以实现模块js的懒加载,即只有当需要时才去加载对应模块的js脚本文件,以加速主页的显示。比如只有第一次用户点击某个“用户信息”按钮或菜单时,才下载“用户信息”这个模块的js组件。
懒加载的实现,依赖与webpack下AMD模式require函数的功能。webpack会将异步require的文件生成一个独立的js文件,调用时异步下载这个js且在完成后再执行它。开发项目中实现的关键代码是:
const basicInfo = { path: '/user', component: resolve => require(['./basicInfo.vue'], resolve) } //然后将这个basicInfo加入路由表中
但是这里有个问题:从用户点击“用户信息”菜单开始,到js文件下载完毕执行开始,由于从网络下载js有一个时间延迟,这期间用户界面是没有任何响应的,让用户感觉点上去无效,常会重复再次点击。特别是js文件大而网速慢时更明显。因此,在这个过程中添加一个Loading的加载提示很有必要。
我们分析这行代码:
resolve => require(['./basicInfo.vue'], resolve)
它是一个函数,执行了require的过程,完成后再调用resolve回调函数。我们只要封装一下,在require执行之前显示Loading,然后在加载完成执行回调的时候隐藏Loading,也就实现这个需求了。如下:
const basicInfo = { path: '/user', component: resolve => { [显示Loading] require(['./basicInfo.vue'], component => { [隐藏Loading] resolve(component) }) } };
显示和隐藏Loading的代码,可根据自己的UI框架处理就行。比如element-ui:
import { Loading } from 'element-ui'; var unique; export default { show() { let opt = {body: true, text: 'Loading...'}; if(!unique) unique = Loading.service(opt); }, resolve(resolve) { return function (component) { if (unique) { unique.close(); unique = null; } resolve(component) } } } const basicInfo = { path: '/user', component: resolve => { spinRoute.show(); require(['./basicInfo.vue'], spinRoute.resolve(resolve)) } };
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
Atas ialah kandungan terperinci 懒加载过程中添加loading. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![在Illustrator中加载插件时出错[修复]](https://img.php.cn/upload/article/000/465/014/170831522770626.jpg)
启动AdobeIllustrator时是否会弹出加载插件时出错的消息?一些Illustrator用户在打开该应用程序时遇到了此错误。消息后面紧跟着一系列有问题的插件。该错误提示表明已安装的插件存在问题,但也可能是由于VisualC++DLL文件损坏或首选项文件受损等其他原因引起。如果遇到此错误,我们将在本文中指导您修复问题,请继续阅读以下内容。在Illustrator中加载插件时出错如果您在尝试启动AdobeIllustrator时收到“加载插件时出错”的错误消息,您可以使用以下用途:以管理员身

字幕在你的WindowsPC上不能在Stremio上运行吗?一些Stremio用户报告说,视频中没有显示字幕。许多用户报告说遇到了一条错误消息,上面写着“加载字幕时出错”。以下是与此错误一起显示的完整错误消息:加载字幕时出错加载字幕失败:这可能是您正在使用的插件或您的网络有问题。正如错误消息所说,可能是您的互联网连接导致了错误。因此,请检查您的网络连接,并确保您的互联网工作正常。除此之外,这个错误的背后可能还有其他原因,包括字幕加载项冲突、特定视频内容不支持字幕以及Stremio应用程序过时。如

随着互联网的发展,越来越多的网页需要支持滚动加载,而无限滚动加载是其中的一种。它可以让页面不断加载新的内容,使用户可以更流畅地浏览网页。在这篇文章中,我们将介绍如何使用PHP实现无限滚动加载。一、什么是无限滚动加载?无限滚动加载是一种基于滚动条的网页内容加载方式。它的原理是当用户滚动至页面底部时,通过AJAX异步调取后台数据,实现不断加载新的内容。这种加载方

css加载不出来的解决办法有检查文件路径、检查文件内容、清除浏览器缓存、检查服务器设置、使用开发者工具和检查网络连接等。详细介绍:1、检查文件路径,首先请确保CSS文件的路径正确,如果CSS文件位于网站的不同部分或子目录中,需要提供正确的路径,如果CSS文件位于根目录下,路径应该是直接的;2、检查文件内容,如果路径正确,那么问题可能出在CSS文件本身,打开CSS文件检查等等。

如果您在向Outlook插入超链接时遇到冻结问题,可能是由于网络连接不稳定、Outlook版本旧、防病毒软件干扰或加载项冲突等原因。这些因素可能导致Outlook无法正常处理超链接操作。修复插入超链接时Outlook冻结的问题使用以下修复程序解决插入超链接时Outlook冻结的问题:检查已安装的加载项更新Outlook暂时禁用您的防病毒软件,然后尝试创建新的用户配置文件修复办公室应用程序卸载并重新安装Office我们开始吧。1]检查已安装的加载项可能是Outlook中安装的某个加载项导致了问题。

在安装win7系统中,有网友遇到了加载usb驱动失败的情况,usb设备无法在新的win7系统中被识别,常见的u盘,鼠标等设备就无法使用了。那么安装win7加载usb驱动失败怎么办?下面小白就教下大家安装win7加载usb驱动失败的解决方法。方法一:1、首先我们打开电脑进入电脑系统,在电脑系统查看电脑的系统版本。确认电脑系统的版本与设备驱动的版本是否一致。2、确认驱动的版本后,将USB设备连接到电脑系统。电脑系统显示,设备无法连接到系统。3、在连接信息页面,点击帮助按钮查看帮助信息。4、如果电脑系

JavaScript如何实现滚动到页面底部自动加载的无限滚动效果?无限滚动效果是现代网页开发中常见的功能之一,它可以在滚动到页面底部时自动加载更多内容,使得用户可以无需手动点击按钮或链接就能够获取更多的数据或资源。在本文中,我们将探讨如何使用JavaScript来实现这一功能,并提供具体的代码示例。实现滚动到页面底部自动加载的无限滚动效果,主要分为以下

随着数据量不断增加,网页的滚动加载逐渐成为了用户体验的重要部分。在这篇文章中,我们将讨论如何使用Vue.js实现无限滚动加载的完整指南。什么是无限滚动加载?无限滚动加载,又称为无限滚动,是一种Web设计技术,用于在用户滚动页面到底部时添加更多内容。这种技术常用于博客、社交媒体、在线商店等需要动态显示内容的网站上。无限滚动与分页不同。在传统的分页中,用户必须通


Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Pelayar Peperiksaan Selamat
Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.

DVWA
Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini

SublimeText3 versi Inggeris
Disyorkan: Versi Win, menyokong gesaan kod!

EditPlus versi Cina retak
Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod

SublimeText3 Linux versi baharu
SublimeText3 Linux versi terkini
