快捷導(dǎo)航

jQuery生成假加載動畫效果

更新時間：2016年12月01日 11:51:05 作者：println小強(qiáng)

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

在使用PDFObject.js時，由于后臺需要轉(zhuǎn)換數(shù)據(jù)，在前臺顯示的時候，有很長一段時間顯示空白頁面，所以想到寫一個假的加載動畫

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("請求?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生成假加載動畫效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

jquery 顯示*天*時*分*秒實現(xiàn)時間計時器
用jquery實現(xiàn)時間計時器,從之前的某個時間段到現(xiàn)在距離多少天多少時多少分多少秒，示例代碼如下，大家拷貝即可使用
2014-05-05
jQuery 學(xué)習(xí)第五課 Ajax 使用說明
關(guān)于ajax早已不是新鮮話題，而jQuery使ajax變得無比簡單。
2010-05-05
html+jQuery實現(xiàn)拖動滑塊圖片拼圖驗證碼插件【移動端適用】
這篇文章主要介紹了html+jQuery實現(xiàn)拖動滑塊圖片拼圖驗證碼插件，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-09-09
jQuery中clone()方法用法實例
這篇文章主要介紹了jQuery中clone()方法用法,實例分析了clone()方法的功能、定義及克隆匹配的DOM元素的使用技巧,需要的朋友可以參考下
2015-01-01
jquery獲取easyui日期控件的值實現(xiàn)方法
下面小編就為大家?guī)硪黄猨query獲取easyui日期控件的值實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-11-11
深入解析jQuery中Deferred的deferred.promise()方法
這篇文章主要介紹了jQuery中Deferred的deferred.promise()方法,提醒千萬要注意deferred.promise()與jQuery的.promise() 實例方法的區(qū)別,需要的朋友可以參考下
2016-05-05
jQuery封裝的tab選項卡插件分享
本文給大家分享的是個人封裝的tab選項卡特效的插件，十分的簡單實用，附上用法和示例，有需要的小伙伴可以參考下。
2015-06-06
jquery實現(xiàn)簡單合攏與展開網(wǎng)頁面板的方法
這篇文章主要介紹了jquery實現(xiàn)簡單合攏與展開網(wǎng)頁面板的方法,通過簡單的jquery頁面元素樣式操作實現(xiàn)展開與合攏面板的功能,非常簡單實用,需要的朋友可以參考下
2015-09-09
jquery+json實現(xiàn)數(shù)據(jù)列表分頁示例代碼
該實例中，新聞數(shù)據(jù)列表未使用表格顯示，下面有個不錯的示例完美實現(xiàn)實現(xiàn)數(shù)據(jù)列表分頁，感興趣的朋友不要錯過
2013-11-11
淺談jQuery.easyui的datebox格式化時間
這篇文章主要介紹了淺談jQuery.easyui的datebox格式化時間的方法,需要的朋友可以參考下
2015-06-06