jauery+ajax實現滾動到頁面底部時自動加載內容

第6天     實現第二個小插件，在歐巴和百度的幫助下完成的。

首先分析思路：

一、首先判斷如今是否滾動到頁面底部。獲取當前滾動條到頂部的距離、文檔高度、當前窗口瀏覽器高度。

二、滾動到底部時出現正在加載數據的動畫，到數據加載完成時動畫消失。

三、自動追加內容。這個要用到ajax。

代碼實現以下：

HTML、JavaScript

 1 <div id="test" style="height: 1000px;">test</div>                                        <!-- div高度設置高於當前瀏覽器窗口高度 -->
 2 <div id="txt" ></div>                                                                                     <!-- 自動加載數據存放於該div中 -->
 3 <img id="loading" style="display: none;" src="img/loading.gif" />             <!-- 正在加載的動畫圖 -->
 4 <script>
 5     $(window).scroll(function() {
 6         //$(document).scrollTop()    滾動條位置距頁面頂部的距離；
 7         //$(document).height()         整個頁面的總高度；
 8         //$(window).height()             當前窗口的高度；
 9         if ($(document).scrollTop() >= $(document).height() - $(window).height()) {   //判斷是否已經滾動到頁面底部；
10             $("#loading").css("display", "block");                                                            //切換正在加載的數據的圖片狀態爲顯示；
11             $.ajax({                                                                                                          //加載ajax；
12                 url: 'jsonObj.json',                                                                                    //請求路徑，這裏的路徑是一個json文件；
13                 success: function(data) {                                                                          //當請求成功時執行的回調函數；
14                     var str = ""                                                                                         
15                     $.each(data, function(i, item) {                                                            //遍歷出來json裏邊的內容；i，表示當前遍歷到第幾條內容；item，表示當前遍歷的對象；
16                         str +="<li>"+'姓名：' + item.name + '  年齡：' + item.age + '  性別：' + item.sex +"</li>"
17                     });
18                      $("#txt").append(str);                                                                          //把遍歷到的內容追擊到id爲txt的div中；
19                     $("#loading").css("display", "none");                                                   //切換正在加載數據圖片狀態爲不顯示；
20                 }
21             });
22         }
23     });        
24 </script>

json文件以下：

1 [{"name":"lxg","age":"23","sex":"男"},{"name":"lx","age":"22","sex":"女"}]