js加载等待效果

本文转载自查看原文 2019-01-21 19:13 1686 等待/ html/ 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>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 ajax 异步加载显示等待效果 Winform--实现加载数据时动态等待/加载效果纯js+css实现loading等待效果 js等待全部图片加载完毕 C#.Net网页加载等待效果漂亮并且简单两种页面加载等待效果的实现 JS进度加载条效果【javascript的那些事】等待加载完js后执行方法 Android登录等待效果 WPF 大数据加载过程中的等待效果——圆圈转动