頁面載入中jquery逐漸消失效果實現

標籤：情況   loading   網上   ready   改變   bsp   ica   add   gif   

為了獲得更好的使用者體驗，現在大多數網頁都會在頁面中加一個載入中效果，這裡實現一個載入中逐漸消失的效果，以至於看上去不那麼生硬。

html:

<div id="loading"><img src="images/common/loading.gif" ></div>

css:

/*載入中*/#loading{    position: fixed;    top: 0;    left: 0;    width: 100%;    height: 100%;    background-color:#333;    z-index: 2000;    opacity: 1;}#loading img{    width:400px;    height:300px;    position:absolute;    top:50%;    left:50%;    margin-top:-150px;    margin-left:-200px;    z-index: 2001;}

這裡的載入中為一個gif的動態圖，相對css，要更簡單好用，多樣化，但是gif圖片容易太大，導致圖片載入過慢，所以要到網上找一些在線壓縮圖片的地方壓縮一下，儘可能不失真的情況下減小體積。

js:

<script>        //loading載入中//監聽載入狀態改變document.onreadystatechange = completeLoading;           //載入狀態為complete時移除loading效果   function completeLoading() {               if (document.readyState == "complete") {          $("#loading").animate({                                  "opacity":"0"           },500).hide(1000);    }    }</script>

給載入中效果預設opacity設為1，逐漸消失的效果則把opacity變為0，但是元素在頁面中不消失，這樣會影響頁面其他元素的點擊使用，所以要把元素隱藏掉。

本文出自 “Apple皮的前端之路” 部落格，請務必保留此出處http://beileixinqing.blog.51cto.com/7540036/1929514

頁面載入中jquery逐漸消失效果實現