jQuery生成假加载动画效果

 更新时间:2016年12月01日 11:51:05   作者:println小强  
在使用PDFObject.js时,由于后台需要转换数据,在前台显示的时候,有很长一段时间显示空白页面,所以想到写一个假的加载动画,下面看下实现代码

在使用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生成假加载动画效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • JQuery报错Uncaught TypeError: Illegal invocation的处理方法

    JQuery报错Uncaught TypeError: Illegal invocation的处理方法

    这篇文章主要介绍了JQuery报错"Uncaught TypeError: Illegal invocation"的处理方法,需要的朋友可以参考下
    2015-03-03
  • jQuery 3 中的新增功能汇总介绍

    jQuery 3 中的新增功能汇总介绍

    本文带你了解了一遍 jQuery 3 将会带来的一些重大变化。或许你已经注意到了,这个版本是可能对你现有的项目产生太大的影响,因为没有引入太多许多重大更改。
    2016-06-06
  • jQuery之关于resize()方法的使用

    jQuery之关于resize()方法的使用

    这篇文章主要介绍了jQuery之关于resize()方法的使用,具有很好的价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • 细说浏览器特性检测(2)-通用事件检测

    细说浏览器特性检测(2)-通用事件检测

    在上一篇中介绍了jQuery1.4版本新增的几个浏览器特性检测方案和具体的目的,本文将以事件为中心,介绍一个较为完整、通用的事件检测方案。
    2010-11-11
  • jQuery通过ajax请求php遍历json数组到table中的代码(推荐)

    jQuery通过ajax请求php遍历json数组到table中的代码(推荐)

    这篇文章主要介绍了jQuery通过ajax请求php遍历json数组到table中代码(推荐)的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • jquery获取复选框被选中的值

    jquery获取复选框被选中的值

    这篇文章主要介绍了jquery获取复选框被选中的值的方法,需要的朋友可以参考下
    2014-03-03
  • jquery插件实现扫雷游戏(1)

    jquery插件实现扫雷游戏(1)

    这篇文章主要为大家详细介绍了jquery插件实现扫雷游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • jQuery.Form上传文件操作

    jQuery.Form上传文件操作

    这篇文章主要介绍了jQuery.Form上传文件操作,首先需要我们先建立test文件夹,具体代码内容大家通过本文学习下吧
    2017-02-02
  • jquery validate表单验证的基本用法入门

    jquery validate表单验证的基本用法入门

    这篇文章主要为大家介绍了jquery validate表单验证的基本用法入门,jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • jQuery前端框架easyui使用Dialog时bug处理

    jQuery前端框架easyui使用Dialog时bug处理

    本文介绍了在jQuery前端框架easyui开发UI时,使用Dialog时发现遮罩无法覆盖页面内容,而且对话框也显示不出来,经过一番研究,才发现问题所在,这里分享给大家,有相同情况的小伙伴可以参考下
    2014-12-12

最新评论