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调用

为啥通过 AJAX 无限滚动加载的内容的高度在加载后没有正确测量?

AJAX 加载内容后滚动条不起作用

执行AJAX返回HTML片段中的JavaScript脚本

防止重复无限滚动ajax加载器