Jquery网页滚动条滚动到最下面自动加载下一页

<head>
    <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
    //（假设网速超快加载数据又很少，网页可以在瞬间或者1、2秒内就可以加载完成）
    <script type="text/javascript">
        var isNoData = 0;//服务器还有数据可加载，就是还没到最后一页
        var isDone = 1; //网页是否在加载完成  1表示已经加载完成 
        var page_index = 0; //当前加载页数  打开网页时默认为0，就是第一页

        window.onload = function () {
            $(window).scroll(function () {
                if (isNoData == 0) {//还不是最后一页数据
                    var pageH = $(document.body).outerHeight(true); //整个网页高度
                    var winH = $(window).height(); //页面可视区域高度 
                    var scrollT = $(window).scrollTop(); //滚动条top 
                    if (pageH  - winH - scrollT - 10 <= 0.5) {//滚动到哪个位置触发加载事件，在这里设置
                        if (isDone == 1) {
                            page_index++;
                            isDone = 0;
                            ShowData(page_index,参数2, 参数3, ....);
                            setTimeout('Delay()', 2000); //延时2秒
                        }
                    }
                }
            });
        }

        //用于延时触发加载下一页，当滚动条到最下方时  正在加载下一页同时滚动条又在拉动 可能会引起瞬间再次向后台发送加载下一页的请求,延时一下解决这问题 
        function Delay() {
            isDone = 1;
        }

        function ShowData(page_index,参数2, 参数3,.....) {
            $.ajax({
                url: 'Main.aspx',
                type: 'Post',
                data: { "page_index": page_index, "参数2": 参数2, "参数3": 参数3 },
                success: function (msg) {
                    $('#div1').append(msg);
                }
            });
        }
    </script>
</head>

<body>
    <div id="div1"></div>
</body>

--------------------------分割线------------------

下面是div中的滚动条拉到div最下端触发加载下一页，替换上面的$(window).scroll()事件就可以了

$("#div1").scroll(function () {
    if (isDone == 1) {
        //var winH = $(window).height(); //页面可视区域高度 
        var div1_H = $('#div1').outerHeight(true);
        var scrollTHight = $(this)[0].scrollHeight; //滚动距离总长(注意不是滚动条的长度)
        var scrollT = $(this)[0].scrollTop; //滚动到的当前位置
        if (scrollT + div1_H >= scrollTHight-2) {
            page_index++;
            isDone = 0;
            ShowData(txtHLSearch, adsType, txtAds_id, page_index);
            setTimeout('Delay()', 2000); //延时2秒
        }
    }
});

Jquery网页滚动条滚动到最下面自动加载下一页

猜你喜欢