jauery+ajax实现滚动到页面底部时自动加载内容

第6天     实现第二个小插件，在欧巴和百度的帮助下完成的。

首先分析思路：

1、首先判断现在是否滚动到页面底部。获取当前滚动条到顶部的距离、文档高度、当前窗口浏览器高度。

2、滚动到底部时出现正在加载数据的动画，到数据加载完成时动画消失。

3、自动追加内容。这个要用到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文件如下：

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