頁面加載進度條加載完成后顯示頁面內容，很多時候需要給頁面做個這樣的效果，讓頁面整體看起來更規范化，下面武林網給出3個思路來實現頁面加載進度條加載完成后顯示頁面內容。
思路一、加入很多圖片，以延遲加載時間，實現加載完后顯示圖片。定義一個外層DIV，覆蓋住圖片，在內層DIV中引入加載時顯示的圖片，讓內層DIV居中在頁面上，利用setInterval定時器設置3秒后將外層DIV隱藏，從而顯示圖片，達到加載完后顯示頁面的效果。
<!DOCTYPE html><html><head><title></title><style type="text/css">.loading{width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 100;background: #fff;}.loading .pic{width: 64px;height: 64px;background: url(loading.gif);position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;}</style></head><body><img src="http://img5.imgtn.bdimg.com/it/u=4244789527,2286705620&fm=200&gp=0.jpg"><script type="text/javascript" src="jquery-1.8.2.min.js"></script><script type="text/javascript">$(function(){var loading='<div class="loading"><div class="pic"></div></div>';$('body').append(loading);setInterval(function(){$('.loading').fadeOut();},3000)})</script></body></html>這里需要注意的知識點 DIV居中：
position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;
思路二、利用狀態事件監聽的方法：onreadystatechange，判斷redayState，實現加載完后顯示頁面的效果
<!DOCTYPE html><html><head><title></title><style type="text/css">.loading{width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 100;background: #fff;}.loading .pic{width: 64px;height: 64px;background: url(loading.gif);position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;}</style></head><body> <div class="loading"><div class="pic"></div></div><img src="http://img5.imgtn.bdimg.com/it/u=4244789527,2286705620&fm=200&gp=0.jpg"><script type="text/javascript" src="jquery-1.8.2.min.js"></script><script type="text/javascript">document.onreadystatechange=function(){if(document.redayState=='complete'){$('loading').fadeOut();}}</script></body></html>這個一方法的知識點是：通過onreadystatechange事件監聽readyState的狀態，我們只需要關心最后一個狀態'complete'，當達到complete狀態，說明加載成功。
思路三、利用CSS3實現動畫效果，達到加載 完后顯示頁面。同樣采用onreadystatechange事件監聽的方法，不同的是實現了一種動態效果。
利用i標簽，加入CSS樣式，實現5個間隔開的矩形。利用animation每隔1.2s循環一次，無限循環。每個i標簽，延時0.1s在Y方向上伸長縮短，達到動畫效果。
<!DOCTYPE html><html><head><title></title><style type="text/css">.loading{width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 100;background: #fff;}.loading .pic{width: 50px;height: 50px;position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;}.loading .pic i{display: block;float: left;width: 6px;height: 50px;background: #399;margin: 0 2px;-webkit-transform: scaleY(0.4); -ms-transform: scaleY(0.4); transform: scaleY(0.4);-webkit-animation: load 1.2s infinite; animation: load 1.2s infinite;}.loading .pic i:nth-child(2){-webkit-animation-delay: 0.1s; animation-delay: 0.1s;}.loading .pic i:nth-child(3){-webkit-animation-delay: 0.2s; animation-delay: 0.2s;}.loading .pic i:nth-child(4){-webkit-animation-delay: 0.3s; animation-delay: 0.3s;}.loading .pic i:nth-child(5){-webkit-animation-delay: 0.4s; animation-delay: 0.4s;}@-webkit-keyframes load{0%,40%,100%{-webkit-transform: scaleY(0.4); transform: scaleY(0.4);}20%{-webkit-transform: scaleY(1); transform: scaleY(1);}}@keyframes load{0%,40%,100%{-webkit-transform: scaleY(0.4); transform: scaleY(0.4);}20%{-webkit-transform: scaleY(1); transform: scaleY(1);}}</style></head><body> <div class="loading"><div class="pic"><i></i><i></i><i></i><i></i><i></i></div></div><img src="http://img5.imgtn.bdimg.com/it/u=4244789527,2286705620&fm=200&gp=0.jpg"><script type="text/javascript" src="jquery-1.8.2.min.js"></script><script type="text/javascript">document.onreadystatechange=function(){if(document.redayState=='complete'){$('loading').fadeOut();}}</script></body></html>這一思路需要注意的知識點：
1.scale:伸長縮短。scaleX:x方向。scaleY:y方向。
2.infinite:無限循環
3.animate-delay:0.1s 延時0.1s
4.@keyframes 動畫名稱{
0%{}
100%{}}
以上就是頁面加載進度條加載完成后顯示頁面內容的全部內容，希望對大家的學習和解決疑問有所幫助，也希望大家多多支持武林網。新聞熱點
疑難解答
