js当滚动条即将到达底部自动加载数据

var totalheight = 0;
    var htm_index = 0;

    $(window).scroll(function () {

 

        totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());

 

        if ((totalheight >= $(document).height()) && (htm_index < 5)) {

 

            $.get("/Load_List.aspx", { page: htm_index++ }, function (data) {

 

                $("#LoadDIV").before(data);

            });
        }
    });

这是一个高1500px的区域，目的就是让网页超过窗口高度，这样才会显示滚动条。

需要加载页面的区域，id的值要与后面script的值相同。

javascript解析

var totalheight = 0;

设置一个高度变量，我称之为“总高度”，为的是实时计算窗口的高度加上滚动条的高度，简单来说就是计算你的网页浏览到哪里了。

var htm_index = 0;

这是一个计算已经加载了多少个网页的变量，要想不断的加载网页，总是要有个参考值，来计算你加载了多少页面。

举个例子，你的数据库有一百条数据，你一个页面显示10条记录，那么你总共会有10页。当你调用列表页时会显示1-10条数据，当滚动条到底部时，你需要加载的就应该是第二页（11-20条），再到底部时，你需要加载的就应该是第三页（21-30条），一次类推。一般来说，你加载的会是同一个页面，那么怎么区分第几页呢？答案就是，你调用的网页会有一个变量在url中，这个变量我们假定为page，当page=1时，显示第一页，当page=2时，显示第二页。

$(window).scroll(function () {

当滚动条滚动时会触发这个函数，一个触发事件，没啥解释的

totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());

设置总高度=窗口高度+滚动条高度，简单的说就是计算你当前浏览的位置。一般来说，这个位置最大值是不会超过网页的高度。

if ((totalheight >= $(document).height()) && (htm_index < 5)) {

判断语句，如果你浏览的位置大于等于网页的高度，并且已经加载页面数量小于5时，执行里面的语句。

注意：

一、浏览位置不会大于网页的高度，之所以有大于这个判断，是为了有扩展用法，例如：>=(ocument).height()-50)，就是说不用等滚动条到底部时就加载，50那个值，可以根据需要设置。

二、加载页面数量小于5，这个可有可无。一般的网站，不会无限加载的，那样用户看着也会累的。你想象一下，如果你浏览了一个网页一个多小时还没到底部，会给人没完没了的感觉。5这个值可以根据你一个网页的高度来制定。

$.get("/Load_List.aspx", { page: htm_index++ }, function (data) {

这里get出现了三个参数，第一个是你要加载的网页；第二个是这个页面的参数集合，这个例子里我用了一个参数page用来指定调用的那个网页从哪个数据位置读取，这是一个参数集合，也就是说可以设置好几个不同的参数，不同的参数用“，”分隔；第三个参数是一个函数，这样的用法主要是为了把加载网页的代码赋值到函数中data这个变量（这个解释也许不准确，但实际应用时产生的效果就是这样的）。

$("#LoadDIV").before(data);

before函数作用是在 $("#LoadDIV")这个元素的前面插入数据，在这里插入的数据是data，也就是上条语句中读取的网页内容。

之所以用before，是为了每次都在指定元素前插入，这样每次插入后，都会把LoadDIV挤到最后面，实现了每次都在最后插入数据。

原文转自：http://blog.sina.com.cn/s/blog_e3b7f6df0101m9vn.html

js当滚动条即将到达底部自动加载数据

猜你喜欢