頁面加載中jquery逐漸消失效果實作

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

html:

<code>&lt;</code><code>div</code> <code>id</code><code>=</code><code>"loading"</code><code>&gt;&lt;</code><code>img</code> <code>src</code><code>=</code><code>"images/common/loading.gif"</code> <code>alt</code><code>=</code><code>""</code><code>&gt;&lt;/</code><code>div</code><code>&gt;</code>

css:

<code>/*加載中*/</code>

<code>#loading{</code>

<code>    </code><code>position</code><code>: </code><code>fixed</code><code>;</code>

<code>    </code><code>top</code><code>: </code><code>0</code><code>;</code>

<code>    </code><code>left</code><code>: </code><code>0</code><code>;</code>

<code>    </code><code>width</code><code>: </code><code>100%</code><code>;</code>

<code>    </code><code>height</code><code>: </code><code>100%</code><code>;</code>

<code>    </code><code>background-color</code><code>:</code><code>#333</code><code>;</code>

<code>    </code><code>z-index</code><code>: </code><code>2000</code><code>;</code>

<code>    </code><code>opacity: </code><code>1</code><code>;</code>

<code>}#loading img{</code>

<code>    </code><code>width</code><code>:</code><code>400px</code><code>;</code>

<code>    </code><code>height</code><code>:</code><code>300px</code><code>;</code>

<code>    </code><code>position</code><code>:</code><code>absolute</code><code>;</code>

<code>    </code><code>top</code><code>:</code><code>50%</code><code>;</code>

<code>    </code><code>left</code><code>:</code><code>50%</code><code>;</code>

<code>    </code><code>margin-top</code><code>:</code><code>-150px</code><code>;</code>

<code>    </code><code>margin-left</code><code>:</code><code>-200px</code><code>;</code>

<code>    </code><code>z-index</code><code>: </code><code>2001</code><code>;</code>

<code>}</code>

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

js:

<code>&lt;script&gt;        </code>

<code>//loading加載中</code>

<code>//監聽加載狀态改變</code>

<code>document.onreadystatechange = completeLoading;        </code>

<code>   </code><code>//加載狀态為complete時移除loading效果</code>

<code>   </code><code>function</code> <code>completeLoading() {            </code>

<code>   </code><code>if</code> <code>(document.readyState == </code><code>"complete"</code><code>) {</code>

<code>          </code><code>$(</code><code>"#loading"</code><code>).animate({                    </code>

<code>              </code><code>"opacity"</code><code>:</code><code>"0"</code>

<code>           </code><code>},500).hide(1000);</code>

<code>    </code><code>}</code>

<code>&lt;/script&gt;</code>

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

本文轉自 蓓蕾心晴 51CTO部落格，原文連結：http://blog.51cto.com/beileixinqing/1929514，如需轉載請自行聯系原作者