用vue做的页面一直显示正在拼命加载中

2024-09-02

vue 页面首次加载缓慢原因及解决方案

第一次打包vue的项目部署到服务器,发现首次加载特别的缓慢要几十秒才加载出来,完全没有在本地开发环境上那么流畅. 主要原因是页面在打包后没有进行相关的配置导致资源文件特别大,一次想要全部加载完成回特别的耗时. 下面是总结的vue项目性能优化的方案一:vue-router 路由懒加载在使用同步的方式加载组件的时候,首屏加载会对网络资源加载比较多,资源比较大,加载速度比较慢,所以设置路由懒加载,按需加载会加速首屏的渲染. 但是在设置懒加载之后,实现按需加载,那么项目打包不会把所有js打包进ap

一个页面从输入URL到加载显示完成，发生了什么？

面试经典题--URL加载一.涉及基本知识点: 1. 计算机网络五层因特尔协议栈: 应用层(dns.http):DNS解析成IP并完成http请求发送: 传输层(tcp.udp):三次握手四次挥手模式建立tcp连接: 网络层(IP.ARP):IP寻址: 数据链路层(PPP):将请求数据封装成帧: 物理层:利用物理介质传输比特流(传输的时候通过双绞线.电磁波等) OIS七层框架:多了两层即,会话层(处理两个通信系统中交换信息的表示方式)和表示层(管理不同用户和进程之间的对话). get和post

Javascript在ajax提交过程中页面显示加载中，请等待效果，并在提交过程中限制确定按钮防止多次提交，提交完成后，解除提交限制

加载中,请等待div: <div id="load" class="center-in-center" style="display:none;"> <img src="../resources/images/loader.gif" />加载中,请等待... </div> 确定重置按钮: <div class="form-group row"> <div

vue+better-scroll 下拉刷新，上拉加载更多

better-scroll 来做下拉刷新和上拉加载特别方便. 安装好vue脚手架和better-scroll 之后直接复制粘贴就可以看到效果了 <template> <div class="rules"> <p class="drop-down" v-if="dropDown">松手刷新数据...</p> <div class="bscroll" ref="

【原创】从零开始搭建Electron+Vue+Webpack项目框架（五）预加载和Electron自动更新

导航: (一)Electron跑起来(二)从零搭建Vue全家桶+webpack项目框架(三)Electron+Vue+Webpack,联合调试整个项目(四)Electron配置润色(五)预加载及自动更新(六)构建.发布整个项目(包括client和web)(未完待续) 摘要:到目前为止,我们的项目已经具备了PC客户端该有的一些基础功能和调试环境,但是总感觉缺了灵魂,那就是结合实际项目.实际业务的细节处理,缺着吧...这篇文章就介绍一下预加载和自动更新,文字功底有限,如有介绍的不清楚的地方,欢迎留言

jquery mobile 请求数据方法执行时显示加载中提示框

在jquery mobile开发中,经常需要调用ajax方法,异步获取数据,如果异步获取数据方法由于网速等等的原因,会有一个反应时间,如果能在点击按钮后数据处理期间,给一个正在加载的提示,客户体验会更好一些. 如果需要在页面加载时显示加载器,页面加载完成之后关闭加载器,请参考另一篇文章:jquery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较先看两个方法,显示和关闭,方法来自于参考:http://blog.csdn.net/z

jQuery Mobile 手动显示ajax加载器，提示加载中...

在使用jQuery Mobile开发时,有时候我们需要在请求ajax期间,显示加载提示框(例如:一个旋转图片+一个提示:加载中...).这个时候,我们可以手动显示jQuery Mobile的加载器,大致流程如下: 1. 启动加载器,显示“加载中...”: 2. 进行ajax请求,请求完成后更新页面数据,刷新jQuery Mobile控件样式: 3. 关闭加载器. 下面就来讲解jQuery Mobile 1.2.0 和 1.1.0 中手动显示加载器的方法(很简单,几行代码就OK了!). 首先是jQ

css 实现页面加载中等待效果

<!DOCTYPE html> <html> <head> <title>css实现页面加载中,请稍候效果</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my pa

利用document的readyState去实现页面加载中的效果

打开新的网页时,为了增强友好性体验,告知用户网页正在加载数据需要呈现一个"页面加载中"之类的提示,只需要利用document就可以实现. 实现示例代码如下: <style> .loading_background { cursor: wait; display: block; width: 100%; height: 100%; background: rgba(0,0,0,.5); position: absolute; top: 0; left: 0; z-index:

WPF防止界面卡死并显示加载中效果

原文:WPF防止界面卡死并显示加载中效果网上貌似没有完整的WPF正在加载的例子,所以自己写了一个,希望能帮到有需要的同学前台: <Window x:Class="WpfApplication1.Loading" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml

jquery 中dataTable显示加载中，图片或文字

引入js文件 <script type="text/javascript" src="${basePath}/lib/datatables/1.10.0/jquery.dataTables.min.js"></script> 配合加载中图片一起,下面这个是设置加载图片的位置为居中显示 <style type="text/css"> /*设置正在加载中的居中显示*/ .dataTables_wrapper .da

使用Wireshark成功解决JavaWeb项目的页面一直加载中的问题

现象打开服务器页面 10.2.155.100,然后发现页面JS显示加载中..F12浏览器看起来像是发起css等静态资源时卡死.一时定位还以为时前端的问题. 解决过程上服务器抓包: tcpdump -i eth0 dst or src or icmp \) -w caps.out 用Wireshark打开看,发现有699-702 连续四个请求发到后端,后端没响应. 然后,找到对应的服务,重启,发现ERROR日志: -- :: [] ERROR org.apache.jasper.Embe

用Loading 加载中的整页加载来做蒙层

总结:遇见的bug 如何写一个蒙层最初我打算的是自己写一个蒙层,但是写出来后, 不能够将整个屏幕全部覆盖.只能够覆盖除[顶部导航] 和[左侧菜单栏] 于是我就使用了element-ui中的 [Loading 加载中]的[整页加载]来处理推荐使用它来做蒙层因为简单快 2==> 显示显示区域无法水平垂直居中. 因为父级元素没有给height:100%;(重要) 父级元素不给高度100%:无法居中哈! 3==>最大问题感觉关闭按钮在蒙层之下,图片在蒙层之上. 整了很久,最后发现是按钮的

vue mint-ui 框架下拉刷新上拉加载组件的使用

安装 npm i mint-ui -S 然后在main.js中引入 import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' Vue.use(MintUI) 下拉刷新上拉加载更多数据 <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref=&

基于JQuery实现滚动到页面底端时自动加载更多信息

基于JQuery实现滚动到页面底端时自动加载更多信息关键代码: 代码如下: var stop=true; $(window).scroll(function(){ totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop()); if($(document).height() <= totalheight){ if(stop==true){ stop=false; $.post("ajax.

动态链接库知识点总结之三（如何以显示的方式加载DLL）

总结一下如何显示加载方式加载DLL, 首先,我们新建一个win32项目,选择dll,空项目,再添加一个源文件,一个模块定义文件(.def),具体如下图.(详细方法已经在前两篇文章中讲述,如有不懂,打开链接查看) (1) 新建项目,名称为:dll,添加一个源文件(.cpp),编代码,编译文件 . (2) 为项目添加一个模块定义文件(上一篇文章中详细介绍)(先新建一个文本,再改属性名),编辑代码,如下图 (3) 新建一个DLL测试应用程序(基于对话框的),项目名字:TestDLL,

discuz微社区始终显示“正在加载中”

使用DZ的tools工具一键关闭所有插件后,帮我排查了js冲突的问题,但是也带来了一系列后患: 云平台连“QQ互联”也失效了,之前云平台的各项业务已经不正常,无法开启关闭,提示“远程接口无法调用...” 微社区无法正常访问,始终显示“正在加载中” 使用“修复数据库”功能之后,文章栏目链接跳转错误对于微社区问题,解决的方法很邪门儿: 我把微信登陆插件的“网站 URL”重新填写,开始填写是后面加了一个index.php,然后微社区这次直接变成报错,至少不再是“加载中...” 然后我恢复之前的URL

页面ajax自带的访问后台时,正在加载中

ajax自带访问后台时,提示正在加载中,加载完成后自动消除遮罩层,代码如下: var mask=mui.createMask();//遮罩层 //传统ajax的post请求方式 mui.ajax('http://192.168.1.112:8080/YSE/back/queryapp_getRetuenFoods.action', { data: { bd:bd,//"2018-01-01" ed:ed//"2018-01-25" }, beforeSend: fu

页面加载中jquery逐渐消失效果实现

为了获得更好的用户体验,现在大多数网页都会在页面中加一个加载中效果,这里实现一个加载中逐渐消失的效果,以至于看上去不那么生硬. html: <div id="loading"><img src="images/common/loading.gif" alt=""></div> css: /*加载中*/ #loading{ position: fixed; top:; left:; width: 100%; he

一个简单的适用于Vue的下拉刷新，触底加载组件

一个简单的适用于Vue的上拉刷新,触底加载组件,没有发布npm需要时直接粘贴定制修改即可 <template> <div class="list-warp-template" @touchstart="handlerStart" @touchend="handlerEnd" @touchmove="handlerMove" @scroll="handlerScroll" ref="

微信小程序在使用wx.request时显示加载中

微信小程序中,向后台请求数据是,通常想给用户提示正在加载中,如下图: 我们可以用wx.showLoading(OBJECT),当请求服务器的地方多了,怎么才能不每次都要去调用函数,我们只要对wx.request加工下就可以了,在utils下新建js文件network.js var requestHandler = { url: '', data: {}, method: '', success: function (res) { }, fail: function () { }, complet

用vue做的页面一直显示正在拼命加载中

热门专题