JQuery Load 動畫是一種很有用的技術,可以讓網頁在加載AJAX數據的時候顯示一個加載動畫,讓用戶感覺更流暢。這種動畫效果就是在jquery load 函數中完成的。
$(document).ready(function(){ var $loading = $('#loading').hide(); $(document) .ajaxStart(function () { $loading.show(); }) .ajaxStop(function () { $loading.hide(); }); });
第一行代碼是使用JQuery來調用這個函數。在第二行代碼中定義了一個變量 $loading,這個變量是一個jQuery對象,它是被隱藏的。第三行代碼是jQuery的ready()函數。當DOM加載完成后,代碼就會被執行。
接下來的代碼中,我們使用了兩個jQuery AJAX事件:ajaxStart 和 ajaxStop。這兩個事件是在AJAX開始和結束時被調用的。在 ajaxStart 中,我們使 $loading 顯示出來,而在 ajaxStop 中,我們使 $loading 隱藏起來。這個過程就形成了一個完美的動畫效果。
現在,我們的動畫加載界面已經實現了。但是,我們還需要一些基本的CSS樣式,來讓這個加載動畫變得更加吸引人。下面是樣式:
#loading { position: fixed; z-index: 1000; height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.5); background-image: url('loader.gif'); background-repeat: no-repeat; background-position: center; }
上述代碼的任務是將 #loading 元素固定在頁面上,使其遮蓋住其他內容。它還定義了一個半透明的黑色背景,以及一個 gif 圖像作為臨時的加載圖標。
現在,我們可以將上述所有代碼整合到一起,并將其放在一個已有的HTML頁面中。我們就可以看到一個非常漂亮的jQuery Load 動畫了。