jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
本文实例讲述了jQuery+ajax实现滚动到页面底部自动加载图文列表效果。分享给大家供大家参考,具体如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>滚动到页面顶部加载</title> <scriptsrc="js/jquery-1.11.1.min.js"type="text/javascript"></script> <scriptsrc="js/endlesspage.js"type="text/javascript"></script> <styletype="text/css"> .mainDiv{ width:800px; border:solid1px#f00; padding:10px; } .item{ width:600px; height:50px; border:solid1px#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> <divclass="mainDiv"> <!--<divclass="item"> <divclass="title">title</div> <divclass="content">contentcontentcontentcontentcontentcontentcontent</div> </div> --> </div> <divclass="loaddiv"> <imgsrc="images/loading.gif"/> </div> <div> <ahref="javascript:void(0);"id="btn_Page"class="alink">查看更多>>></a> </div> </body> </html>
/*endlesspage.js*/ vargPageSize=10; vari=1;//设置当前页数,全局变量 $(function(){ //根据页数读取数据 functiongetData(pagenumber){ i++;//页码自动增加,保证下次调用时为新的一页。 $.get("/ajax/Handler.ashx",{pagesize:gPageSize,pagenumber:pagenumber},function(data){ if(data.length>0){ varjsonObj=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){ varjsonObj=JSON.parse(data); insertDiv(jsonObj); } }, beforeSend:function(){ $(".loaddiv").show(); }, error:function(){ $(".loaddiv").hide(); } }); } //初始化加载第一页数据 getData(1); //生成数据html,append到div中 functioninsertDiv(json){ var$mainDiv=$(".mainDiv"); varhtml=''; for(vari=0;i<json.length;i++){ html+='<divclass="item">'; html+='<divclass="title">'+json[i].rowId+''+json[i].D_Name+'</div>'; html+='<divclass="content">'+json[i].D_Name+''+json[i].D_Password+'</div>'; html+='</div>'; } $mainDiv.append(html); } //==============核心代码============= varwinH=$(window).height();//页面可视区域高度 varscrollHandler=function(){ varpageH=$(document.body).height(); varscrollT=$(window).scrollTop();//滚动条top varaa=(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); }); });
<%@WebHandlerLanguage="C#"Class="Handler"%> usingSystem; usingSystem.Web; usingSystem.Data; usingMSCL; usingNewtonsoft.Json; publicclassHandler:IHttpHandler{ publicvoidProcessRequest(HttpContextcontext) { //核心处理程序 stringpageSize=context.Request["pagesize"]; stringpageIndex=context.Request["pagenumber"]; if(string.IsNullOrEmpty(pageSize)||string.IsNullOrEmpty(pageIndex)) { context.Response.Write(""); } else { //请结合实际自行取分页数据,可调用分页存储过程 MSCL.PageHelperp=newPageHelper(); p.CurrentPageIndex=Convert.ToInt32(pageIndex); p.FieldsName="*"; p.KeyField="d_id"; p.SortName="d_idasc"; p.TableName="testtable"; p.EndCondition="count(*)"; p.PageSize=Convert.ToInt32(pageSize); DataTabledt=p.QueryPagination(); stringjson=JsonConvert.SerializeObject(dt,Formatting.Indented); context.Response.Write(json); } } publicboolIsReusable{ get{ returnfalse; } } }
[ { "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相关内容感兴趣的读者可查看本站专题:《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。