用js判斷頁面是否載入完成
阿新 • • 發佈：2019-01-08
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>loading……demo</title> <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <script type="text/javascript" src="js/jquery.js"></script> </head> <body> <div class="wrap"> <section class="home"></section> </div> <div class="loading"> <p>loading……</p> </div> </body> </html>
很偶然的機會和白開聊到怎麼去判斷頁面載入完成後再將頁面內容顯示出來，今天突然想到這個就隨手寫了一個簡單的demo，原來竟是這麼簡單，而自己卻一直沒去整過，總算是明白了，原來自己已菜了這麼久
*{padding: 0; margin:0;} html{font-size: 40px;} body, html{width: 100%; height: 100%;} .wrap{ position: relative; width:100%; height:100%;} .home{width: 100%; height:100%; background: url(images/bg.jpg) no-repeat; background-size: 100% 100%;} .loading{position: absolute; width: 100%; height: 100%; background: #fff; z-index: 99;} .loading p{position: fixed; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); text-align: center; color: #222; font-size:0.8rem;}
document.onreadystatechange = loadingChange;//當頁面載入狀態改變的時候執行這個方法.
function loadingChange()
{
if(document.readyState == "complete"){ //當頁面載入狀態為完全結束時進入
$(".loading").hide();//當頁面載入完成後將loading頁隱藏
}
}