Jquery生成假加载动画

最新推荐文章于 2024-01-04 09:25:46 发布

println小强

最新推荐文章于 2024-01-04 09:25:46 发布

阅读量867

点赞数

分类专栏：工作经验文章标签： jquery 动画

本文链接：https://blog.csdn.net/sunguoqiang1213/article/details/53419567

版权

工作经验专栏收录该内容

45 篇文章 0 订阅

订阅专栏

在使用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>

println小强

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery生成假加载动画

在使用PDFObject.js时，由于后台需要转换数据，在前台显示的时候，有很长一段时间显示空白页面，所以想到写一个假的加载动画 script片段：<script type="text/javascript">var bar = 0; var line = "||" ; var amount ="||" ; function count(){ bar= bar+2 ;
复制链接

扫一扫