超簡易網頁 Loading 載入效果設計 (超實用 好東西不用嗎?)

網站載入提示對於網頁設計應用來說非常重要 ! 尤其是當你的網站速度不是非常快的時候，若沒有載入提示，對於網站用戶離開當頁的機會將會提高很多，因為正常網站使用者都無法忍受「未知」的等待，因此若您的網頁有個貼心的載入提醒，對於用戶來說可能會增加一些等待的意願。

所以今天來教大家一個非常簡易的 Loading 效果 !
這裡我們將會使用到 jQuery 的 「 $(window).load 」函數，這個函數的意義在於，必須等到網頁中(包括圖片)的所有元素載入完畢後才會執行裡面的動作內容。OK 這就是我們要的 ! 因為我們目前想要達到的目的效果就是，將網頁載入效果(無論是文字或圖片)預設顯示，當 $(window).load 完畢後，再執行隱藏(HIDE)動作，這樣就完成了一個簡單的Loading 效果 .

          DEMO

HTML程式碼部分

這部分的文字可換成Loading圖片, 大家請隨意

1. <div id='loading'>正在載入頁面資料...</div>

複製代碼

CSS 美化

再來幫剛剛的loading div稍微美化加工一下，這裡分享一下簡單的CSS效果

1.     z-index: 1;
   
2.     padding: 10px 10px 5px;
   
3.     background: rgb(255, 0, 136);
   
4.     left: 0;
   
5.     top: 0;
   
6.     color: #fff;
   
7.     position: fixed;
   
8.     width: 150px;
   
9.     height: 30px;
   
10.     text-align: center;
    
11.     box-shadow: 2px 2px 10px;
    
12.     border-radius: 5px;

複製代碼

JQUERY部分

請先在網頁HEAD標籤中引用JQuery文件

1. <script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.6.1.min.js"></script>

複製代碼

接著在BODY結尾標籤處加入以下程式碼

1. <script>
   
2. $(window).load(function(){
   
3.         $('#loading').hide(1000);
   
4.         });
   
5. </script>

複製代碼

OK 完工 ! 是不是很簡單呢 ~ 趕緊來試一下吧...