在使用PDFObject.js時(shí)，由于后臺(tái)需要轉(zhuǎn)換數(shù)據(jù)，在前臺(tái)顯示的時(shí)候，有很長(zhǎng)一段時(shí)間顯示空白頁(yè)面，所以想到寫(xiě)一個(gè)假的加載動(dòng)畫(huà)，下面看下實(shí)現(xiàn)代碼

在使用PDFObject.js時(shí)，由于后臺(tái)需要轉(zhuǎn)換數(shù)據(jù)，在前臺(tái)顯示的時(shí)候，有很長(zhǎng)一段時(shí)間顯示空白頁(yè)面，所以想到寫(xiě)一個(gè)假的加載動(dòng)畫(huà)

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){
//設(shè)置1.5秒循環(huán)一次
setTimeout("count()",150);
}else{
$("#beforeSee").hide();
$("#pdfSee").show();
};
};
window.onload = function (){
PDFObject.embed("請(qǐng)求?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;">拼命加載中，請(qǐng)稍后</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;">控件丟失，請(qǐng)重新加載</span></p>
</div>
</body>

以上所述是小編給大家介紹的jQuery生成假加載動(dòng)畫(huà)效果，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

JQuery報(bào)錯(cuò)Uncaught TypeError: Illegal invocation的處理方法
這篇文章主要介紹了JQuery報(bào)錯(cuò)"Uncaught TypeError: Illegal invocation"的處理方法,需要的朋友可以參考下
2015-03-03
jQuery 3 中的新增功能匯總介紹
本文帶你了解了一遍 jQuery 3 將會(huì)帶來(lái)的一些重大變化。或許你已經(jīng)注意到了，這個(gè)版本是可能對(duì)你現(xiàn)有的項(xiàng)目產(chǎn)生太大的影響，因?yàn)闆](méi)有引入太多許多重大更改。
2016-06-06
jQuery之關(guān)于resize()方法的使用
這篇文章主要介紹了jQuery之關(guān)于resize()方法的使用，具有很好的價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-07-07
細(xì)說(shuō)瀏覽器特性檢測(cè)(2)-通用事件檢測(cè)
在上一篇中介紹了jQuery1.4版本新增的幾個(gè)瀏覽器特性檢測(cè)方案和具體的目的，本文將以事件為中心，介紹一個(gè)較為完整、通用的事件檢測(cè)方案。
2010-11-11
jQuery通過(guò)ajax請(qǐng)求php遍歷json數(shù)組到table中的代碼(推薦)
這篇文章主要介紹了jQuery通過(guò)ajax請(qǐng)求php遍歷json數(shù)組到table中代碼(推薦)的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-06-06
jquery獲取復(fù)選框被選中的值
這篇文章主要介紹了jquery獲取復(fù)選框被選中的值的方法,需要的朋友可以參考下
2014-03-03
jquery插件實(shí)現(xiàn)掃雷游戲(1)
這篇文章主要為大家詳細(xì)介紹了jquery插件實(shí)現(xiàn)掃雷游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-04-04
jQuery.Form上傳文件操作
這篇文章主要介紹了jQuery.Form上傳文件操作,首先需要我們先建立test文件夾，具體代碼內(nèi)容大家通過(guò)本文學(xué)習(xí)下吧
2017-02-02
jquery validate表單驗(yàn)證的基本用法入門(mén)
這篇文章主要為大家介紹了jquery validate表單驗(yàn)證的基本用法入門(mén)，jQuery Validate 插件為表單提供了強(qiáng)大的驗(yàn)證功能，讓客戶端表單驗(yàn)證變得更簡(jiǎn)單，同時(shí)提供了大量的定制選項(xiàng)，滿足應(yīng)用程序各種需求，感興趣的小伙伴們可以參考一下
2016-01-01
jQuery前端框架easyui使用Dialog時(shí)bug處理
本文介紹了在jQuery前端框架easyui開(kāi)發(fā)UI時(shí)，使用Dialog時(shí)發(fā)現(xiàn)遮罩無(wú)法覆蓋頁(yè)面內(nèi)容，而且對(duì)話框也顯示不出來(lái)，經(jīng)過(guò)一番研究，才發(fā)現(xiàn)問(wèn)題所在，這里分享給大家，有相同情況的小伙伴可以參考下
2014-12-12