ajax滚动条懒加载
Posted zzx849918265
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ajax滚动条懒加载相关的知识,希望对你有一定的参考价值。
前端html
<div class="activity_box"> <ul class="clearfix" id="contact"> <!--内容--> </ul> <div id="loading" style="text-align: center"> <img src="/images/loading.gif" alt="" />正在加载数据,请稍候...
</div> </div>
前端JS:
<script> var pageindex = 1; var DataIsNull = false; function GetData(pageindex) { var url = "ajax/do_data.ashx"; var act = "activity"; $.ajax({ type: "POST", url: url, dataType: "html", async: true, data: { "act": act, "page": pageindex }, beforeSend: function () { ShowDiv(); }, complete: function () { HiddenDiv(); }, success: function (data) { if (data == "") { DataIsNull = true; } $("#contact").append(data); } }); } GetData(pageindex); //显示加载数据 function ShowDiv() { $("#loading").show(); } //隐藏加载数据 function HiddenDiv() { $("#loading").hide(); } //滚动条滚动事件 $(window).scroll(function () { if ($(document).scrollTop() + $(window).height() >= $(document).height()) { if (!DataIsNull) { next(); } } }); function next() { pageindex++; GetData(pageindex); }</script>
后端代码:
public void activity() { int maxPageSize = 8; int pageID = Convert.ToInt32(HttpContext.Current.Request.Form["page"]); int newsCount = BLLNewsInfo.GetRecordCount("");//新闻总数 int PageCount = newsCount / maxPageSize + (newsCount % maxPageSize == 0 ? 0 : 1);//最大页数 int MaxPerPage1 = pageID == PageCount ? (newsCount - (PageCount - 1) * maxPageSize) : maxPageSize; if (pageID > PageCount) { HttpContext.Current.Response.Write(""); } else { News_InfoList = BLLNewsInfo.GetListByPage("1=1", " AddDate", MaxPerPage1, maxPageSize * pageID); StringBuilder html = new StringBuilder(); foreach (SHLY.Model.News_Info item in News_InfoList) { html.AppendLine("<li>"); html.AppendLine("<a href="/news-" + item.Id + ".html" title="" + item.Title + "" >"); html.AppendLine("<img src="" + item.TitlePic + ""/>"); html.AppendLine("</a>"); html.AppendLine("<p><a href="/news-" + item.Id + ".html" title="" + item.Title + "" >"); html.AppendLine("" + item.Title + "</a></p>"); html.AppendLine("</li>"); } HttpContext.Current.Response.Write(html.ToString()); } }
以上是关于ajax滚动条懒加载的主要内容,如果未能解决你的问题,请参考以下文章
向下滚动到 Fancybox 窗口中的元素(ajax 加载的内容)
html 输入类型提交通常在单击时重新加载页面。此片段使输入不重新加载页面以便进行ajax调用