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 相关文章推荐
js限制文本框为整数和货币的函数代码
Oct 13 Javascript
JavaScript 继承使用分析
May 12 Javascript
js 操作select和option常用代码整理
Dec 13 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
Jan 21 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
Apr 25 Javascript
Bootstrap布局组件应用实例讲解
Feb 17 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
Apr 13 Javascript
JS重载实现方法分析
Dec 16 Javascript
详解vuex 中的 state 在组件中如何监听
May 23 Javascript
详解JSONObject和JSONArray区别及基本用法
Oct 25 Javascript
浅谈vue的第一个commit分析
Jun 08 Javascript
vue实现表格合并功能
Dec 01 Vue.js
解析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通过rmdir删除目录的简单用法
2015/03/18 PHP
基于Jquery制作的幻灯片图集效果打包下载
2011/02/12 Javascript
angularjs基础教程
2014/12/25 Javascript
jQuery菜单插件superfish使用指南
2015/04/21 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
2015/08/18 Javascript
js淡入淡出焦点图幻灯片效果代码分享
2015/09/08 Javascript
基于jQuery Tipso插件实现消息提示框特效
2016/03/16 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
2016/08/08 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
2017/05/12 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
2017/05/25 Javascript
详解浏览器缓存和webpack缓存配置
2018/07/06 Javascript
微信小程序顶部导航栏滑动tab效果
2019/01/28 Javascript
详解在Javascript中进行面向切面编程
2019/04/28 Javascript
iphone刘海屏页面适配方法
2019/05/07 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
微信小程序缓存支持二次开发封装实现解析
2019/12/16 Javascript
微信小程序使用前置摄像头拍照
2020/10/22 Javascript
如何在 ant 的table中实现图片的渲染操作
2020/10/28 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
2020/11/04 Javascript
[45:25]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
Python多线程编程(六):可重入锁RLock
2015/04/05 Python
全面理解Python中self的用法
2016/06/04 Python
详解Python多线程
2016/11/14 Python
python递归全排列实现方法
2018/08/18 Python
Python3列表内置方法大全及示例代码小结
2019/05/10 Python
对Django外键关系的描述
2019/07/26 Python
python实现一个函数版的名片管理系统过程解析
2019/08/27 Python
python3中numpy函数tile的用法详解
2019/12/04 Python
Python接口自动化测试框架运行原理及流程
2020/11/30 Python
美津浓美国官网:Mizuno美国
2018/08/07 全球购物
企业党员公开承诺书
2014/03/26 职场文书
党员违纪检讨书怎么写
2014/11/01 职场文书
iPhone13再次曝光
2021/04/15 数码科技
Java使用httpRequest+Jsoup爬取红蓝球号码
2021/07/02 Java/Android
SpringBoot系列之MongoDB Aggregations用法详解
2022/02/12 MongoDB