頁面的下拉載入效果基於ajax載入資料
阿新 • • 發佈：2019-01-24
準備一個靜態的html檔案，不用多說，head區域引入下jquery
PHP程式碼如下：<!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
if(isset($_POST)) {
//為了避免gif圖因資料載入過快而破壞測試效果,指令碼延時5秒返回
sleep(5);
echo <<<STR
載入成功！<br/>
STR;
}