jQuery生成假加载动画效果


Posted in Javascript onDecember 01, 2016

在使用PDFObject.js时,由于后台需要转换数据,在前台显示的时候,有很长一段时间显示空白页面,所以想到写一个假的加载动画

script片段:

<script type="text/javascript">
var bar = 0; 
var line = "||" ; 
var amount ="||" ; 
function count(){ 
bar= bar+2 ; 
amount =amount + line; 
$("#chart").val(amount);
$("#percent").val(bar+"%"); 
if (bar<99){
//设置1.5秒循环一次
setTimeout("count()",150);
}else{
$("#beforeSee").hide();
$("#pdfSee").show();
};
};
window.onload = function (){
PDFObject.embed("请求?code=${vdata.code}", "#pdfSee");
count(); 
}; 
</script>

body片段:

<body >
<div align=center id="beforeSee" width="100%" height="100%"> 
<p><span class="red" style="font-size:50px;">拼命加载中,请稍后</span></p> 
<p> 
<input type="text" id="chart" name="chart" size="46" style="font-family:Arial; font-weight:bolder; color:gray;background-color:white; padding:0px; border-style:none;"> 
<br> 
<input type="text" id="percent" name="percent" size=46 style="font-family:Arial; color:gray; text-align:center; border-width:medium; border-style:none;">
<script type="text/javascript">
</script>
</p> 
</div>
<div align=center id="pdfSee" style="display:none" width="100%" height="100%">
<p><span class="red" style="font-size:50px;">控件丢失,请重新加载</span></p>
</div>
</body>

以上所述是小编给大家介绍的jQuery生成假加载动画效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
html5 canvas js(数字时钟)实例代码
Dec 23 Javascript
jquery选择器之属性过滤选择器详解
Jan 27 Javascript
jQuery对象初始化的传参方式
Feb 26 Javascript
全系IE支持Bootstrap的解决方法
Oct 19 Javascript
jQuery判断浏览器并动态调整select宽度的方法
Mar 02 Javascript
vue.js入门教程之计算属性
Sep 01 Javascript
JS组件系列之JS组件封装过程详解
Apr 28 Javascript
JavaScript递归算法生成树形菜单
Aug 15 Javascript
JavaScript文件的同步和异步加载的实现代码
Aug 19 Javascript
JavaScript ES6箭头函数使用指南
Dec 30 Javascript
使用webpack将ES6转化ES5的实现方法
Oct 13 Javascript
深入理解Antd-Select组件的用法
Feb 25 Javascript
解析AngularJS中get请求URL出现的跨域问题
Dec 01 #Javascript
浅谈js键盘事件全面控制
Dec 01 #Javascript
jstree的简单实例
Dec 01 #Javascript
Vue.JS入门教程之事件监听
Dec 01 #Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
Dec 01 #Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
Dec 01 #Javascript
jsTree使用记录实例
Dec 01 #Javascript
You might like
php合并数组array_merge函数运算符加号与的区别
2008/10/31 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
laravel5.2表单验证,并显示错误信息的实例
2019/09/29 PHP
离开当前页面前使用js判断条件提示是否要离开页面
2014/05/02 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
2016/10/14 Javascript
Node.js下自定义错误类型详解
2016/10/17 Javascript
vue实现留言板todolist功能
2017/08/16 Javascript
10个最优秀的Node.js MVC框架
2017/08/24 Javascript
浅谈Koa服务限流方法实践
2017/10/23 Javascript
JavaScript分步实现一个出生日期的正则表达式
2018/03/22 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
2018/07/20 Javascript
学习使用ExpressJS 4.0中的新Router的用法
2018/11/06 Javascript
Js利用正则表达式去除字符串的中括号
2020/11/23 Javascript
如何使用原生Js实现随机点名详解
2021/01/06 Javascript
[03:41]DOTA2上海特锦赛小组赛第三日recap精彩回顾
2016/02/28 DOTA
Python中__init__.py文件的作用详解
2016/09/18 Python
Python实现PS图像调整黑白效果示例
2018/01/25 Python
pyqt5 tablewidget 利用线程动态刷新数据的方法
2019/06/17 Python
详解DeBug Python神级工具PySnooper
2019/07/03 Python
详解Pandas之容易让人混淆的行选择和列选择
2019/07/10 Python
解决Django Static内容不能加载显示的问题
2019/07/28 Python
Django values()和value_list()的使用
2020/03/31 Python
Python 的 __str__ 和 __repr__ 方法对比
2020/09/02 Python
html5中监听canvas内部元素点击事件的三种方法
2019/04/28 HTML / CSS
美国领先的商务贺卡出版商:The Gallery Collection
2018/02/13 全球购物
Joules官网:女士、男士和儿童服装和鞋类
2018/10/23 全球购物
Crocs欧洲官网:Crocs Europe
2020/01/14 全球购物
幼儿园庆六一活动方案
2014/03/06 职场文书
大学奖学金获奖感言
2014/08/15 职场文书
劳动争议和解协议书范本
2014/11/20 职场文书
2015年社区关工委工作总结
2015/04/03 职场文书
酒店前台岗位职责
2015/04/16 职场文书
老公出轨后的保证书
2015/05/08 职场文书
信用卡催款律师函
2015/05/27 职场文书
浅谈golang package中init方法的多处定义及运行顺序问题
2021/05/06 Golang
Nginx实现会话保持的两种方式
2022/03/18 Servers