jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)

摘要：本文实例讲述了jQuery+ajax实现滚动到页面底部自动加载图文列表效果。分享给大家供大家参考，具体如下：滚动到页面顶部加载.mainDi...

本文实例讲述了jQuery+ajax实现滚动到页面底部自动加载图文列表效果。分享给大家供大家参考，具体如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>滚动到页面顶部加载</title> <script src="js/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="js/endlesspage.js" type="text/javascript"></script> <style type="text/css"> .mainDiv { width: 800px; border: solid 1px #f00; padding: 10px; } .item { width: 600px; height: 50px; border: solid 1px #00ff90; font-size: 12px; margin: 10px; } .title { font-size: 16px; line-height: 20px; } .content { line-height: 14px; } .alink { display:none; } .loaddiv { display:none; } </style> </head> <body> <h1>滚动测试</h1> <div>  </div> <div> <img src="images/loading.gif" /> </div> <div> <a href="javascript:void(0);" id="btn_Page">查看更多>>></a> </div> </body> </html>

/*endlesspage.js*/ var gPageSize = 10; var i = 1; //设置当前页数，全局变量 $(function () { //根据页数读取数据 function getData(pagenumber) { i++; //页码自动增加，保证下次调用时为新的一页。 $.get("/ajax/Handler.ashx", { pagesize: gPageSize, pagenumber: pagenumber }, function (data) { if (data.length > 0) { var jsonObj = JSON.parse(data); insertDiv(jsonObj); } }); $.ajax({ type: "post", url: "/ajax/Handler.ashx", data: { pagesize: gPageSize, pagenumber: pagenumber }, dataType: "json", success: function (data) { $(".loaddiv").hide(); if (data.length > 0) { var jsonObj = JSON.parse(data); insertDiv(jsonObj); } }, beforeSend: function () { $(".loaddiv").show(); }, error: function () { $(".loaddiv").hide(); } }); } //初始化加载第一页数据 getData(1); //生成数据html,append到div中 function insertDiv(json) { var $mainDiv = $(".mainDiv"); var html = ''; for (var i = 0; i < json.length; i++) { html += '<div>'; html += ' <div>' + json[i].rowId + ' ' + json[i].D_Name + '</div>'; html += ' <div>' + json[i].D_Name + ' ' + json[i].D_Password + '</div>'; html += '</div>'; } $mainDiv.append(html); } //==============核心代码============= var winH = $(window).height(); //页面可视区域高度 var scrollHandler = function () { var pageH = $(document.body).height(); var scrollT = $(window).scrollTop(); //滚动条top var aa = (pageH - winH - scrollT) / winH; if (aa < 0.02) {//0.02是个参数 if (i % 10 === 0) {//每10页做一次停顿！ getData(i); $(window).unbind('scroll'); $("#btn_Page").show(); } else { getData(i); $("#btn_Page").hide(); } } } //定义鼠标滚动事件 $(window).scroll(scrollHandler); //==============核心代码============= //继续加载按钮事件 $("#btn_Page").click(function () { getData(i); $(window).scroll(scrollHandler); }); });

<%@ WebHandler Language="C#" %> using System; using System.Web; using System.Data; using MSCL; using Newtonsoft.Json; public class Handler : IHttpHandler { public void ProcessRequest(HttpContext context) { //核心处理程序 string pageSize = context.Request["pagesize"]; string pageIndex = context.Request["pagenumber"]; if (string.IsNullOrEmpty(pageSize) || string.IsNullOrEmpty(pageIndex)) { context.Response.Write(""); } else { //请结合实际自行取分页数据，可调用分页存储过程 MSCL.PageHelper p = new PageHelper(); p.CurrentPageIndex = Convert.ToInt32(pageIndex); p.FieldsName = "*"; p.KeyField = "d_id"; p.SortName = "d_id asc"; p.TableName = "testtable"; p.EndCondition = "count(*)"; p.PageSize = Convert.ToInt32(pageSize); DataTable dt = p.QueryPagination(); string json = JsonConvert.SerializeObject(dt, Formatting.Indented); context.Response.Write(json); } } public bool IsReusable { get { return false; } } }

[ { "rowId": 1, "D_Id": 1, "D_Name": "名称1", "D_Password": "密码测试1", "D_Else": "其他1" }, { "rowId": 2, "D_Id": 2, "D_Name": "名称2", "D_Password": "密码测试2", "D_Else": "其他2" }, { "rowId": 3, "D_Id": 3, "D_Name": "名称3", "D_Password": "密码测试3", "D_Else": "其他3" }, { "rowId": 4, "D_Id": 4, "D_Name": "名称4", "D_Password": "密码测试4", "D_Else": "其他4" }, { "rowId": 5, "D_Id": 5, "D_Name": "名称5", "D_Password": "密码测试5", "D_Else": "其他5" }, { "rowId": 6, "D_Id": 6, "D_Name": "名称6", "D_Password": "密码测试6", "D_Else": "其他6" }, { "rowId": 7, "D_Id": 7, "D_Name": "名称7", "D_Password": "密码测试7", "D_Else": "其他7" }, { "rowId": 8, "D_Id": 8, "D_Name": "名称8", "D_Password": "密码测试8", "D_Else": "其他8" }, { "rowId": 9, "D_Id": 9, "D_Name": "名称9", "D_Password": "密码测试9", "D_Else": "其他9" }, { "rowId": 10, "D_Id": 10, "D_Name": "名称10", "D_Password": "密码测试10", "D_Else": "其他10" } ]

PS：这里还涉及json格式数据的交互操作，关于json数据操作小编推荐几个本站的在线工具供大家参考，相信在以后的开发中可以派上用场：

在线JSON代码检验、检验、美化、格式化工具：

http://tools.jb51.net/code/json

在线XML/JSON互相转换工具：

http://tools.jb51.net/code/xmljson

json代码在线格式化/美化/压缩/编辑/转换工具：

http://tools.jb51.net/code/jsoncodeformat

C语言风格/HTML/CSS/json代码格式化美化工具：

http://tools.jb51.net/code/ccode_html_css_json

希望本文所述对大家jQuery程序设计有所帮助。