废话不多说，直接上代码
index.html
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> 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>
index.js
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 });
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 });
index.css
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 } 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;