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 相关文章推荐
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
Aug 13 Javascript
深入领悟JavaScript中的面向对象
Nov 18 Javascript
jQuery队列操作方法实例
Jun 11 Javascript
基于jQuery+JSON的省市二三级联动效果
Jun 05 Javascript
vue组件实例解析
Jan 10 Javascript
jquery表单验证插件validation使用方法详解
Jan 20 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
Jan 23 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
Feb 03 Javascript
JS中双击和单击事件冲突的解决方法
Apr 09 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
Jun 29 Javascript
JavaScript中发出HTTP请求最常用的方法
Jul 12 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
Aug 10 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
笑谈配置,使用Smarty技术
2007/01/04 PHP
领悟php接口中interface存在的意义
2013/06/27 PHP
php 判断网页是否是utf8编码的方法
2014/06/06 PHP
PHP SESSION的增加、删除、修改、查看操作
2015/03/20 PHP
在视频前插入广告
2006/11/20 Javascript
ExtJS 2.0实用简明教程 之Ext类库简介
2009/04/29 Javascript
Javascript 复制数组实现代码
2009/11/26 Javascript
javascript 模式设计之工厂模式学习心得
2010/04/27 Javascript
nodejs实用示例 缩址还原
2010/12/28 NodeJs
超简单JS二级、多级联动的简单实例
2014/02/18 Javascript
JS实用的动画弹出层效果实例
2015/05/05 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
2016/07/21 Javascript
Bootstrap基本布局实现方法详解
2016/11/25 Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
2017/06/20 Javascript
Vue实现搜索 和新闻列表功能简单范例
2018/03/16 Javascript
Vue.js图片预览插件使用详解
2018/08/27 Javascript
webpack之引入图片的实现及问题
2018/10/08 Javascript
ajax与jsonp的区别及用法
2018/10/16 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
node实现爬虫的几种简易方式
2019/08/22 Javascript
Vue之Mixins(混入)的使用方法
2019/09/24 Javascript
javascript实现简易计算器功能
2020/09/23 Javascript
Python中几个比较常见的名词解释
2015/07/04 Python
Python获取邮件地址的方法
2015/07/10 Python
TensorFlow变量管理详解
2018/03/10 Python
对Python实现简单的API接口实例讲解
2018/12/10 Python
Python实现Mysql数据统计及numpy统计函数
2019/07/15 Python
浅析Python语言自带的数据结构有哪些
2019/08/27 Python
python解析命令行参数的三种方法详解
2019/11/29 Python
html5 canvas简单封装一个echarts实现不了的饼图
2018/06/12 HTML / CSS
伊利莎白雅顿官网:Elizabeth Arden
2016/10/10 全球购物
Java面向对象面试题
2016/12/26 面试题
中英文自我评价常用句型
2013/12/19 职场文书
《值日生》教学反思
2014/02/17 职场文书
批评与自我批评发言稿
2014/10/15 职场文书
自荐信大全
2019/03/21 职场文书