準備一個靜態html檔案，不用多說，head地區引入下jquery
<!DOCTYPE html><html><head><meta charset="utf-8"><title>下拉載入</title><script src="jquery.js"></script></head><body><div id="container">下拉載入<br/><!-- 複製上方文字,直到有捲軸出現為止,為了達到測試目的 --></div></body></html><script>//資料載入時期的gif載入圖,用於提示使用者資料正在載入!var loadDiv = '<div class="loading"><img src="loading.gif" width="100px" height="100px" ></div>';//監聽視窗的滑鼠滾輪事件$(window).scroll(function() { //當滾輪滾動到文檔最末位，也就是拉到了最底下if( $(window).scrollTop() == $(document).height() - $(window).height() ) { //避免多次滾輪觸發事件造成圖片的多次追加，加上此判斷 if($('#container .loading').length == 0) { //將圖片插入到內部的內容最末位 $('#container').append(loadDiv); } //發送ajax請求擷取資料 $.ajax({ type: "POST", url: "load.php", success: function(data){ //載入成功,移除用於提示使用者的動態gif圖片 $('#container .loading').remove(); //追加後端返回的資料 $('#container').append(data); } });}});</script>
PHP代碼如下：
<?phpif(isset($_POST)) { //為了避免gif圖因資料載入過快而破壞測試效果,指令碼延時5秒返回 sleep(5); echo <<<STR 載入成功。<br/>STR;}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
