您好,欢迎来到优显汽车网。
搜索
您的当前位置:首页

基于jQuery实现模拟页面加载进度条_jquery

2022-06-15 来源:优显汽车网
摘要
ajax的表单提交只能提交data数据到后台,没法实现file文件的上传还有展示进度功能,这里用到form.js的插件来实现,搭配css样式简单易上手,而且高大上,推荐使用。 需要解释下我的结构, #upload-input-file 的input标签是真实的文件上传按钮,包裹form标签后可以实现上传功能, #upload-input-btn 的button标签是展示给用户的按钮,因为需要样式的美化。上传完成生成的文件名将会显示在 .upload-file-result 里面, .pro

因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟。那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载了多少,而后用jq模拟出一个进度条来显示。 首先我们先画一个进度条的样子,也就是上图图中的样子,这个不用过多说明,自己看代码 CSS 代码如下: .loading{position:relative;top:0;left:0} .tip1{float:left;background:#A70000;color:#fff;height:32px;line-height:32px;padding:0 15px;border:0;position:relative} .jindu{float:left;margin-left:20px;color:#fff;width:150px;height:32px;line-height:32px;background:#000;position:relative} .jindu b{color:#A70000;width:0;height:0;font-size:0px;border-width:10px;border-color:#fff #fff #fff #A70000;border-style:solid;position:absolute;left:-20px;top:5px;overflow:hidden} .jindu .jindu2{width:0px;height:32px;line-height:32px;background:#A70000;position:absolute} .jindu .text{width:150px;height:32px;line-height:32px;text-align:center;position:absolute}   HTML 代码如下: 系统初始化中 页面总进度 0% 这时候注意了,我们要引用jquery库,引用的位置不是在head区域,而是紧接着html代码下面写。为什么要这样,因为样式我们放head里的原因是保证页面加载第一步就把样式加载好,这样页面不会乱。而JS则不需要,再加上页面上大的文件主要也就是js,所以放在body里加载js是为了进度条考虑。 进度条画好了,jquery引用了,我们现在要写个方法,也就是可以让进度条动起来 代码如下: var loading = function(a,b){ var c = b*1.5; if(b==100){ $('.bgloader .jindu2').animate({width:c+'px'},500,function(){ $('.bgloader .tip1').text(a); $('.bgloader font').text(b); $('.bgloader .loading').animate({top:'-32px'},1000,function(){ $('.bgloader').fadeOut(); }); }); }else{ $('.bgloader .jindu2').animate({width:c+'px'},500,function(){ $('.bgloader .tip1').text(a); $('.bgloader font').text(b); }); } }; 这里我写了个loading(a,b),两个参数分别是显示加载内容提示信息和加载进度百分比,然后,我用了其他几个js库做加载进度测试 代码如下:

优显汽车网还为您提供以下相关内容希望对您有帮助:

细说jQuery如何实现懒加载

二、懒加载的实现原理-它的实现原理很简单,先把img的src指向一个小图片,图片真实的地址存储在img一个自定义的属性里,,等到此图片出现在视野范围内了,获取img元素,把src里的值赋给src。三、实现懒加载必备的知识点(一...

用JQuery实现页面Loading的效果,即:当页面加载完成前显示Loading的进度条...

需要两个页面。1.一个是实际页面本身 2.另一个是一个空白页面放一张loading图片 先请求第2个页面,在这个页面中放一段ajax请求第1个页面,在success函数里将页面内容输出,并将loading图片隐藏掉。代码是这样的:loading...

用jQuery或者javascript怎么实现圆形进度条?

网页链接

使用jquery.form.js实现文件上传及进度条前端代码

上传完成生成的文件名将会显示在 .upload-file-result 里面, .progress 是进度条的位置,先让他隐藏加上 hidden 的class, .progress-bar 是进度条的主体, .progress-bar-status 是进度条的文本提醒。去掉hidden的...

用JQuery实现页面Loading的效果,全部加载完成之后进度条消失,怎么办...

1.一个是实际页面本身 2.另一个是一个空白页面放一张loading图片 先请求第2个页面,在这个页面中放一段ajax请求第1个页面,在success函数里将页面内容输出,并将loading图片隐藏掉。代码是这样的:loading page: <body...

如何设置jQuery中progressBar的进度条颜色和其背景颜色

(function() { ("#psp").progressbar({ value: 67 });}); 按这个代码试试,jquery UI改变样式一般用CSS修改:

JS或者jquery的上拉加载和下拉刷新是怎么实现的

1、首先新建一个html文件,命名为test.html,在test.html文件内,引入jquery.min.js库文件,成功加载该文件,才能使用jquery中的方法。2、在test.html文件内,使用button标签创建一个按钮,按钮名称分别为“刷新页面”。3、在...

怎样用原生JS实现jQuery的ready方法

解析HTML结构 加载外部脚本和样式表文件 解析并执行脚本代码 构造HTML DOM模型==ready()加载图片等组件 页面加载完毕==onload()ready事件是在DOM模型构造完毕时触发 load事件是在页面加载完毕后触发 ...

...进度条的过度效果,不知道如何用JS或jQuery实现?

javascript"> var i = 0;function doit(){ i = i + 1;var o = document.getElementById('s1');o.innerHTML = i.toString();if(i<100) setTimeout('doit()',10);} doit(); ...

如何设置jQuery中progressBar的进度条颜色和其背景颜色

('#psp').css({'background':'green'});但是进度条和背景一个颜色,都是浅蓝的,能够显示当前的进步,但是不能区分进度条和背景的颜色,我想区分进度条和北京的颜色 谁能帮助一下,谢谢。问题补充:还是不行,进度条和...

上一篇:苹果11怎么设置漂浮点

下一篇:路由器显示远端服务器无响应是怎么回事

Top