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秒循環(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生成假加載動畫效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
用jquery實現時間計時器,從之前的某個時間段到現在距離多少天多少時多少分多少秒，示例代碼如下，大家拷貝即可使用2014-05-05
關于ajax早已不是新鮮話題，而jQuery使ajax變得無比簡單。2010-05-05
html+jQuery實現拖動滑塊圖片拼圖驗證碼插件【移動端適用】
這篇文章主要介紹了html+jQuery實現拖動滑塊圖片拼圖驗證碼插件，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了jQuery中clone()方法用法,實例分析了clone()方法的功能、定義及克隆匹配的DOM元素的使用技巧,需要的朋友可以參考下2015-01-01
下面小編就為大家?guī)硪黄猨query獲取easyui日期控件的值實現方法。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
深入解析jQuery中Deferred的deferred.promise()方法
這篇文章主要介紹了jQuery中Deferred的deferred.promise()方法,提醒千萬要注意deferred.promise()與jQuery的.promise() 實例方法的區(qū)別,需要的朋友可以參考下2016-05-05
本文給大家分享的是個人封裝的tab選項卡特效的插件，十分的簡單實用，附上用法和示例，有需要的小伙伴可以參考下。2015-06-06
這篇文章主要介紹了jquery實現簡單合攏與展開網頁面板的方法,通過簡單的jquery頁面元素樣式操作實現展開與合攏面板的功能,非常簡單實用,需要的朋友可以參考下2015-09-09
該實例中，新聞數據列表未使用表格顯示，下面有個不錯的示例完美實現實現數據列表分頁，感興趣的朋友不要錯過2013-11-11
這篇文章主要介紹了淺談jQuery.easyui的datebox格式化時間的方法,需要的朋友可以參考下2015-06-06