讀取下一頁或ajax局部更新時以jquery顯示 loading 訊息

不論是使用ajax局部更新或整頁換新，假如loading時間過長，都容易讓user以為網站掛點了。
使用blockUI這個jquery pulgin可以在讀取時顯示相關資訊，讓user知道正在讀取資料（其實類似的jquery plug in很多，但我只用過這個，也覺得blockUI使用簡單且功能夠強）
首先當然要在 html 的 head 中讀入 jquery 及這個plugin，此處不贅敘。（注意！要把jquery放在前面plugin放後面，否則會有bug導致無法執行。）
假設是要整頁換新，可以將負責換新的那個DOM設個id（此處為block），然後使用以下code，就可以在點擊該DOM後，以iphone的形式顯示「please wait」的資訊，直到下一頁出現。

            $('#block').click(function(){
                 $.blockUI({ css: { 
                            border: 'none', 
                            padding: '15px', 
                            backgroundColor: '#000', 
                            '-webkit-border-radius': '10px', 
                            '-moz-border-radius': '10px', 
                            opacity: .5, 
                            color: '#fff' 
                        } }); 
            });

blockUI的官網有很多DEMO和sample code，可以挑自己喜歡的套用。