實現網頁載入過程進度條
阿新 • • 發佈：2019-01-27
（慕課網學習記錄）
*進度條下載網址：https://preloaders.net/
*首先在網頁同目錄下建立images資料夾，放入下載好的進度條檔案
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> <title>進度條</title> <style> .loading{width:100%;height:100%;position:fixed;left:0;top:0;z-index:100;background:#fff} .loading .pic{width:64px;height:64px;background:url(images/4.gif);position:absolute;left:0;top:0;bottom:0;right:0;margin:auto} </style> </head> <body> <img src="http://p2.so.qhimgs1.com/t019de702e48fb0cb02.jpg" /> <img src="http://p2.so.qhimgs1.com/t019de702e48fb0cb02.jpg"/> <img src="http://p2.so.qhimgs1.com/t019de702e48fb0cb02.jpg"/> <img src="http://p2.so.qhimgs1.com/t019de702e48fb0cb02.jpg" /> <img src="http://p2.so.qhimgs1.com/t019de702e48fb0cb02.jpg"/> <img src="http://p2.so.qhimgs1.com/t019de702e48fb0cb02.jpg"/> <img src="http://p2.so.qhimgs1.com/t019de702e48fb0cb02.jpg" /> <img src="http://p2.so.qhimgs1.com/t019de702e48fb0cb02.jpg"/> <img src="http://p2.so.qhimgs1.com/t019de702e48fb0cb02.jpg"/> <script> $(function(){ var loading='<div class="loading"><div class="pic"></div></div>'; $("body").append(loading); }) document.onreadystatechange=function(){ console.log(document.readyState); if(document.readyState=="complete"){ $(".loading").fadeOut(); } } </script> </body> </html>