加載狀態時間製做進度條javascript
document.onreadystatechange 網頁加載狀態改變時的事件html
document.readyState 返回當前文檔的狀態java
返回的4種狀態jquery
1.uninitialized 還未開始載入ide
2.loading 載入中url
3.interative 已加載,文檔與用戶能夠開始交互spa
4.complete 載入完成htm
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .loading{ white-space: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 100; background: #FFFFFF; } .loading .pic{ width: 64px; height: 64px; background: url(img/89.gif); position:absolute; top: 0; bottom: 0; left: 600px; right: 0; margin: auto ; } </style> </head> <body> <div class="loading"> <div class="pic"> </div> </div> </body> </html> <script src="js/jquery.min.js" type="text/javascript"></script> <script> /*當加載好了就直接關閉元素*/ document.onreadystatechange=function(){ if(document.readyState=="complete"){ $(".loading").fadeOut(); } }; </script>
出處 https://www.imooc.com/video/15271blog