zoukankan html css js c++ java

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>

查看全文

相关阅读:
JS面向对象编程的实现
 初见Javascript
详解promise
radio单选按钮组操作
 cookie欺骗实战案例
 XSS攻击
 前端如何实现异步加载
 日常问题
 求1+2+...+n
二叉搜索树的后序遍历序列

原文地址：https://www.cnblogs.com/mxhmxh/p/10300491.html