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刪除。

猜您在找 js等待全部圖片加載完畢兩種頁面加載等待效果的實現原生js 首次加載的loading效果 loading加載動畫效果js實現 WPF 實現的等待效果界面 WPF實現等待界面效果用js實現圖片自動加載的瀑布流效果 js實現頁面加載完畢之前loading提示效果 appium 等待頁面元素加載 js 延時等待