[ js ] 如何寫讀取畫面 how to coding preload and loading page in html?

如何撰寫讀取畫面呢？
這是幾乎所有專案開發都會遇到的問題 這邊使用了html的div,js,還有css
最前面我們要先載入jquery

<!-- jQuery Plugin -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

再來我們需要先創造一個 preloader div

	<div id="preloader">
	<div id="status"><img src="img/status.gif"/></div>
	<div id="loading_txt">Now Loading</div>
	</div> 上面的 ing/status.gif 就是讀取時會出現在畫面中央的gif 再來是寫css定義樣式的部分

#preloader {

/*   這是整個會蓋住畫面的底色色塊 */

position: fixed;

width: 100%;

height: 100%;

left: 0%;

top: 0%;

background-color: #f4f4f4;

z-index: 3002

}

#status {

/*   這是中間loading的gif坐標css,我們盡量讓他畫面置中 */

position: fixed;

width: 218px;

height: 419px;

margin-left: -109px;

margin-top: -110px;

left: 50%;

top: 50%;

background-color: #f4f4f4

}

#loading_txt {

/*   這是讀取icon旁邊的文字區塊，樣式可以自己定義*/

font-size: 14px;

position: fixed;

margin-left: -40px;

margin-top: -12px;

left: 50%;

top: 50%

}

最後我們撰寫js判斷的部分

    $(window).load(function() { // 確認整個頁面讀取完畢再將這三個div隱藏起來
    $("#status").fadeOut();
        $("#loading_txt").fadeOut();
    $("#preloader").delay(350).fadeOut("slow");
    })

整個的邏輯就是先蓋一大片css到畫面中間
等讀取完畢再用jq淡出隱藏起來loading div物件

如果覺得我的文章有幫助
請你點右邊的FB加入訂閱 我會在粉絲團不定期分享新資訊
也歡迎交流！謝謝 阿特底賽粉絲團
https://www.facebook.com/artdesigntw