scroll_read通过Ajax加载新内容，写法比较二

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
6     <title>Ajax_scroll</title>
7     <link type="text/css" href="css/index.css" rel="stylesheet"/>
8     <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
9     <script type="text/javascript" src="js/index.js"></script>
10 </head>
11 <body>
12 <div id="wrapper" class="wrapper">
13     <div class="content-form"></div>
14     <div id="loading"><span></span>加载中...</div>
15 </div>
16 </body>

17 </html>

1 //定义一个全局变量
2 var scr_a;
3 //var scr_b;
4 //页面响应时加载
5 $.ajax({
6     url:"input_form.html",
7     cache:false,
8     success:function (html) {
9         $(".content-form").append(html);
10         //这里scrollHeight = offsetHeight,所以忙活了一个中午取值都不对
11         //scr_a = document.getElementById("wrapper").scrollHeight;
12         //console.log(scr_a);
13         scr_a = document.documentElement.offsetHeight - document.documentElement.clientHeight - 1;
14         //console.log(scr_a);
15     }
16 });
17 //scroll ready
18 var hasShow = false;
19 $(window).bind("scroll", function () {
20     if (hasShow) {
21         $(window).unbind("scroll");
22         return;
23     }
24     //Ajax请求开始显示
25     $("#loading").ajaxStart(function () {
26         $(this).show();
27     });
28     var t = $(document).scrollTop();
29     //console.log(t);
30     if (t > scr_a) {
31         hasShow = true;
32         //延迟2秒加载测试Ajax效果
33         setTimeout(function () {
34             $.ajax({
35                 url:"input_form.html",
36                 cache:false,
37                 success:function (html) {
38                     $(".content-form").append(html);
39                     //scr_b = document.documentElement.offsetHeight - document.documentElement.clientHeight - 1;
40                     //console.log(scr_b);
41                 }
42             });
43         }, 2000);
44     }
45     //Ajax请求结束隐藏
46     $("#loading").ajaxStop(function () {
47         $(this).hide();
48     });
49 });

1 html {
2     color: #000;
3     background: #FFF;
4     font: 12px/1.5 \5b8b\4f53, tahoma, arial
5 }
6
7 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
8     margin: 0;
9     padding: 0
10 }
11
12 table {
13     border-collapse: collapse;
14     border-spacing: 0
15 }
16
17 fieldset, img {
18     border: 0
19 }
20
21 address, caption, cite, code, dfn, em, strong, th, var {
22     font-style: normal;
23     font-weight: normal
24 }
25
26 ol, ul {
27     list-style: none
28 }
29
30 caption, th {
31     text-align: left
32 }
33
34 h1, h2, h3, h4, h5, h6 {
35     font-size: 100%;
36     font-weight: normal
37 }
38
39 q:before, q:after {
40     content: ''
41 }
42
43 abbr, acronym {
44     border: 0;
45     font-variant: normal
46 }
47
48 sup {
49     vertical-align: text-top
50 }
51
52 sub {
53     vertical-align: text-bottom
54 }
55
56 input, textarea, select {
57     font-family: inherit;
58     font-size: inherit;
59     font-weight: inherit
60 }
61
62 input, textarea, select {
63     *font-size: 100%;
64 }
65
66 legend {
67     color: #000
68 }
69
70 .wrapper {
71     width: 950px;
72     margin: 0 auto;
73     padding: 0
74 }
75
76 .content-form {
77     margin: 9px 0;
78     float: left;
79     line-height: 26px
80 }
81
82 #loading {
83     margin: 0 auto;
84     text-align: center;
85     width: 80px;
86 }
87
88 #loading span {
89     background: url("../img/indicator.gif") no-repeat;
90     float: left;
91     width: 16px;
92     height: 16px;

93 }