模仿京东首页DIV懒加载，根据滚动条来加载div

原理是先将需要展示内容的div单独提取出来，放到一个新的页面，在需要展示的时候，直接通过AJAX请求页面，然后展示，实现DIV懒加载，在数据多的时候可以将数据分成很多段，用户滚动到需要展示的位置在加载，大大提高打开网页的速度。

效果图：

1.在没有拉到底部的时候显示一个gif加上提示语



2.在滚动条拉到底部的时候，加载下一页内容



HTML：

 <div id="tiezi">

//假如有一百条数据，这里在用户打开页面的时候展示前10条

</div>

 <div id="result">

        @using (Ajax.BeginForm("TieziFenYe", "Original", new AjaxOptions()

        {

            HttpMethod = "POST",

            InsertionMode = InsertionMode.InsertAfter,//这里是指把得到的结果更新在id为tiezi的div后面

            UpdateTargetId = "tiezi",

        }))

{

//pagenum：所有数据可以分多少页（按一页10条数据分）

//ViewBag.num：从后台获取所有数据的个数

int pagenum = ViewBag.num % 10;

            if (pagenum == 0)

            {

                pagenum = ViewBag.num / 10;

            }

            else

            {

                pagenum = (ViewBag.num / 10) + 1;

            }

            <input type="hidden" id="pagenum" value="@pagenum" />

            <input id="select" type="hidden" name="select" value="@train.select" />

            <div class="loading">

                <img id="loadingimg" class="img-responsive" style="margin-left:7%" src="../Content/images/loading.gif?version=1.1" alt="gif" />

                <h2 style="margin-top:-30px;"><small id="tishi">下拉加载帖子...</small></h2>

            </div>

            <input id="page" type="hidden" name="page" value="2" />

            <input type="submit" id="jiazai" style="display:none" />

}

JS:

script>

    var pagenum = document.getElementById('pagenum').value;//总的分页页数

    var i = 1;

/*这段是当整个页面的高度和可见区域的高度相等是，即没有滚动条出现的时候，直接把加载的GIF和提示的话隐藏*/

    window.onload = function () {

        var scrollHeight = $(document).height();

        var windowHeight = $(this).height();

        if (scrollHeight == windowHeight) {

            document.getElementById('loadingimg').style.display = "none";

            document.getElementById('tishi').innerHTML = "";

        }

    }

/*这段指 当前可见区域的高度+滚动条距离顶部的高度=整个页面的高度，即滚动条滑到最底部的时候执行
       假如有30行数据，pagenum=3， page往后台传的数据从2开始（因为第一页在打开页面的时候就已经加载完成了），第一次传2 即i=2， i<=pagenum 满足条件，当用户再次下拉的时候需要加载第三页的数据，就要往后台传page=3，所有在传之前把i+1，这样传的值就是3了，当用户在次下拉的时候，由于数据只够分三页，在执行js的时候i=4 而pagenum=3
不满足条件，就直接提示拉到底了 */

    $(window).scroll(function () {

        var scrollTop = $(this).scrollTop();//滚动条距离顶部的高度

        var scrollHeight = $(document).height();//获取整个页面的高度

        var windowHeight = $(this).height();//获取当前可见区域的高度

        if (scrollTop + windowHeight == scrollHeight) {

            i = i + 1;

            if (i <= (pagenum)) {

                document.getElementById('jiazai').click();

                var a = i + 1;

                document.getElementById('page').value = a;

            }

            else {

                document.getElementById('loadingimg').style.display = "none";

                document.getElementById('tishi').innerHTML = "别拉了，再拉也加载不出帖子了";

            }

        }

    }

    );

</script>

后台Controller：

//startnum ：查询起始的数字

//num ：查询结束的数字

 public ActionResult TieziFenYe(string select, int page)

        {

            string style = train.style(select);

            string cknum = "select count(*) from 表名 where style=@style";

            num = (int)SqlHelper.ExecuteScalar(cknum, new SqlParameter("@style", style));/*获取数据的总数*/

            int startnum = num - (page * 10) + 1; /*page传的第一个值为2（page=1在第一次加载时完成） 因为起始的数字都是1 11 21 这样的 所有这里要加1*/

            num = startnum + 9; //结束的加上9,因为设定一次加载十条数据

            if (num == 0)/*一般不会发生，发生的条件为前台传过来的page大于最大page，由于前台限制如果page大于最大page，不执行JS 也传不过来*/

            {

                return Content(" <script>alert('到底了！')</script>");//提示错误信息

            }

            if (num < 10)/*最后一页数据不足10条时，得到的startnum为负值，这里将他强制变成1，代表从第一条开始，因为数据我想按照时间顺序排序，则时间最早的一条就是第一条*/

            {

                startnum = 1;

            }

            string showsr = "select * from(select *,row_number() over(order by id) as rownum from 表名where style=@style )a where rownum between @startnum and @num ORDER BY time DESC ";

            DataTable dt = SqlHelper.ExecuteDataTable(showsr, new SqlParameter("@style", style), new SqlParameter("@startnum", startnum), new SqlParameter("@num", num));

            return View(dt);

        }

sql：

select * from(select *,row_number() over(order by id) as rownum from 表名 where style=@style )a where rownum between @startnum and @num ORDER BY time DESC

这句sql语句查询表中指定顺序的数据，它是先将数据查询出来，然后使用rownum进行虚拟排序，具体可以百度rownum 。

假如有一百条数据，想要得带40-50的数据，只需要将startnum 设为40 num设为50即可。

原文链接：lovecry.wang/Original/details?random=1c626be6-5bc7-4202-9ee1-f5aab783c891