php+页面加载进度,基于jQuery实现模拟页面加载进度条_jquery
因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟。那要怎么模拟呢?
我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载了多少,而后用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库做加载进度测试
代码如下:
php+页面加载进度,基于jQuery实现模拟页面加载进度条_jquery相关推荐
- jquery ajax加载页面进度条,基于jQuery实现模拟页面加载进度条
因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载 ...
- 一款基于jquery带百分比的响应式进度加载条
今天要给大家带来一款基于jquery带百分比的响应式进度加载条.这款加载条非常漂亮,而且带有进度的百度比,且在不同的百分比用的是不同的颜色.而且这款加载条采用了响应式设计,在不同的分辨率的显示器下完美 ...
- 基于jquery的上拉加载更多
一个简易的基于jquery的上拉加载更多demo,上拉加载的原理就是容器的高度+容器的scrollTop>=容器内容的高度,整个demo还加上了回弹的动效. <!DOCTYPE html& ...
- 基于Jquery插件Uploadify实现实时显示进度条上传图片
网址:http://www.jb51.net/article/83811.htm 这篇文章主要介绍了基于Jquery插件Uploadify实现实时显示进度条上传图片的相关资料,感兴趣的小伙伴们可以参考 ...
- 基于jquery的图片懒加载js
在京东商城浏览时, 会发现产品图片只显示了一屏, 当页面向下滚动时下面的产品图片才逐渐加载. 以下是实现代码(基于jquery): function lazyload(option){var sett ...
- ajax php加载列表实例,jQuery+PHP+ajax实现加载更多内容列表
我们在一些微博网站上可以碰到这样的应用,微博内容列表没有使用分页条,而是一次加载一定数量的记录显示在列表页,当用户浏览到列表页底部时,可以通过单击"查看更多"来加载更多记录.本文我 ...
- html中加减号怎么输入,jQuery 实现点击加减号改变input标签中的value值,该怎么解决...
jQuery 实现点击加减号改变input标签中的value值 我想点击左右两边的加减号,让中间input标签中的value属性值做出相应的改变,jQuery怎么实现? ------解决思路 ...
- 基于jQuery的图片异步加载和预加载实例
如今的网页中有很多图片,比如相册列表,那么如果一次性读取图片将会瞬间加重服务器的负担,所以我们用jQuery来实现图片的异步加载和预加载功能,这样在页面的可视范围内才会加载图片,当拖动页面至可视界面时 ...
- 基于jquery实现的可拖拽进度条,支持初始值和步长的定义
根据项目需求自己进行了简单的封装,具体代码及效果截图如下: 效果 html <!DOCTYPE html> <html lang="en"> <hea ...
最新文章
- arXiv灌水机:机器自动生成论文标题、摘要信息,还有40+奇妙AI应用
- Tomcat下的work目录
- 哎,辣鸡代码书写准则
- 第三次学JAVA再学不好就吃翔(part57)--StringBuffer和String的相互转换
- java xml 合并_Java中合并XML文档的设计与实现
- 初学者在python下使用Ta-lib库时遇到的一些问题及解决办法
- keepalived高可用lvs集群,主/备和主/主模型
- CSS3---新增内容
- 由replaceAll引发的java.util.regex.PatternSyntaxException错误
- ucloud对象存储装宝塔_使用UCloud优刻得云主机和宝塔面板快速搭建WP个人博客网站教程...
- python mpi多线程_使用 MPI for Python 并行化遗传算法
- ipv6单播地址包括哪两种类型_IPV6中为啥没有ARP了呢?一文带你搞懂NDP邻居发现协议...
- [System Design] 系统设计 (2) -- 数据库设计
- 天锐绿盾技术大讲堂:终端出现红色“+”
- CSS font-family字体大合集
- java 图片转换 gif转jpg
- 智能创新引导工具软件——工作量分配和里程碑安排
- 大型复杂项目集管理之二——项目集治理
- 几个比较好的Web前端开发框架
- 2022年度总结:反思与回顾
热门文章
- 应用层——使用 Socket 通信实现 FTP 客户端程序
- eclipse 国内镜像高速下载
- VSCode 开发Vue必备插件
- 首席架构师徐海峰眼中的架构和出色的架构师
- sum(x) over( partition by y ORDER BY z ) 分析
- bb平台c语言第2章 习题,C语言各章习题集
- boot spring 没有父子容器_Spring 系列(二):Spring MVC的父子容器
- mysql负责均衡读写分离_MySQL读写分离之负载均衡
- hashmap转红黑树的阈值为8_面试必考的 HashMap,这篇总结到位了
- html window 属性,html中window对象top 、self 、parent 等属性