js加载等待效果

demo01:

加载首页的时候，可能会很缓慢，放一张等待图片。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
<html>  
<head>  
<title> New Document </title>  




<style type="text/css">  
.loadpagediv{  
    width:160px;  
    height:56px;  
    position: absolute;  
    top:50%; 
margin-left:-80px;
margin-top:-28px;
    left:50%;  
    background: url(https://m.baidu.com/static/search/ico_loading.gif) no-repeat;  
    z-index:9999;  
}  
</style>  
    <script>  
        var id = setTimeout('loadPage()',100);  
        function loadPage() {  
            // 取得文档载入状态，如果载入完成，则readystate='complete'  
            // 根据这个可以定时去获取文档载入状态，来实现页面载入等待效果  
            var readystate = document.readyState.toLowerCase();  
            if (readystate == 'complete')  
            {  
                clearTimeout(id);  
                document.getElementById('loadpagediv').style.display =  "none";  
            }  
            else {  
                document.getElementById('loadpagediv').style.display =  "block";  
                id = setTimeout('loadPage()',100);  
            }  
  
        }  
    </script>  
</head>  
  
<body>  
    <div id="loadpagediv" class="loadpagediv">  </div> 
</body></html>
代码

已经进入页面，ajax获取数据时候，可能也要等待，这个时候也可以放一张GIF图片。当ajax获取数据成功时，在js中控制显示隐藏即可

<div class="scrollbox">

<image class="imagebar" src="../static/images/time.gif"></image>

</div>

posted @ 2019-01-21 19:13  m*x*h  阅读(3843)  评论(0)  编辑  收藏  举报