您的位置：首页 > Web前端 > JavaScript

js加载等待效果

2016-12-13 15:17 405 查看
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航