HTML
- <!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
- <?php
- if(isset($_POST)) {
- //為了避免gif圖因數據加載過快而破壞測試效果,腳本延時5秒返回
- sleep(5);
- echo <<<STR
- 加載成功！<br/>
- STR;
- }