编程 Javascript

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

jQuery生成假加载动画效果

- Author -

println小强

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript对象之内置对象Math使用方法

Apr 16 Javascript

jquery蒙版控件实现代码

Dec 08 Javascript

window.dialogArguments 使用说明

Apr 11 Javascript

javascript-表格排序(降序/反序)实现介绍(附图)

May 30 Javascript

浅析ajax请求json数据并用js解析(示例分析)

Jul 13 Javascript

Function.prototype.bind用法示例

Sep 16 Javascript

jquery简单实现幻灯片的方法

Aug 03 Javascript

详解为Angular.js内置$http服务添加拦截器的方法

Dec 20 Javascript

React创建组件的三种方式及其区别

Jan 12 Javascript

基于Vue.js与WordPress Rest API构建单页应用详解

Sep 16 Javascript

element-ui和vue表单(对话框)验证提示语(残留)清除操作

Sep 11 Javascript

利用javaScript处理常用事件详解

Apr 14 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