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>

查看全文

相关阅读:
Oracle导出txt文本文件
 oracle spool
[Oracle, MySQL] Oracle通过dblink连接MySQL
正则表达式速查表
 常用的正则表达式
 python3 打印九九乘法口诀表
 canda 常用命令
 python3 拼接字符串的7种方法
 Python 字符串格式化输出方式
 PyCharm 解决有些库（函数）没有代码提示

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