Question

我无法解决这个问题。

当我到达页面底部时，我使用此JS调用来加载ajax内容：

$(window).scroll(function() {
if($(window).scrollTop() + window.innerHeight == $(document).height()  ) {

并且效果很好，但现在我想在我到达容器底部时更改加载内容...我正在尝试这个：

$(window).bind('scroll', function() {
if($(window).scrollTop() >= $('#postswrapper').offset().top +     $('#postswrapper').outerHeight() - window.innerHeight) {

当我到达容器的底部时，它会加载内容，但它会加载它5次......就好像它每次循环5次一样。

我希望它加载ONCE，然后当我回到DOWN页面并且我到达＆＃34; NEW BOTTOM＆＃34;容器，加载数据1次......等等

我尝试了很多变量，但我无法弄明白。有什么建议吗？

完整的AJAX代码

$(window).bind('scroll', function() {
   if($(window).scrollTop() >= $('#postswrapper').offset().top + $('#postswrapper').outerHeight() - window.innerHeight) {



        $('div#loadmoreajaxloader').show();
        $.ajax
        ({
            url: "loadmore.php",
            method: "get",
            data: { page: pageNumber, perpage: perPage, search: "<?=$search?>", blogtag: "<?=$blogtag?>"},
            success: function(html)
                    {
                        if(html)
                        {
                            $("#postswrapper").append(html);
                            $('div#loadmoreajaxloader').hide();

                            pageNumber++;

                        }
                        else
                        {
                            $('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
                        }

                    }

        }); // close AJAX

        }  // close if()
}); // close $(window)

Answer 1

对条件设置为true后，滚动顶部会执行几次：

if($(window).scrollTop() >= $('#postswrapper').offset().top + $('#postswrapper').outerHeight() - window.innerHeight)

这是窗口滚动的测试小提琴，当你移动滚动时它总是触发，你的条件不会限制内部范围只执行一次。

test scrool event

编辑：最简单的方法是在执行ajax请求时使用锁定，同时使用新内容更新UI。

Answer 2

为什么在有大量库的时候自己构建这样的东西呢？只需使用满足您需求的无限滚动库。正如您已经使用jQuery： http://www.sitepoint.com/jquery-infinite-scrolling-demos/

但这不是你问题的答案。您应添加boolean以检查是否已加载新内容。让我们说：loading。最初将此布尔值设置为false。如果您请求新数据，请将布尔值设置为true，并在check scroll语句中添加对此布尔值的检查。添加新加载的内容后，将布尔值再次设置为false。

完全正常工作的代码：

var loading = false;

$(window).bind('scroll', function() {
    if(!loading && $(window).scrollTop() >= ($('#postswrapper').offset().top + $('#postswrapper').outerHeight() - window.innerHeight)) {

        loading = true;

        $('div#loadmoreajaxloader').show();
        $.ajax({
            url: "loadmore.php",
            method: "get",
            data: {
                page: pageNumber,
                perpage: perPage, 
                search: "<?=$search?>", 
                blogtag: "<?=$blogtag?>"
            },
            success: function(html) {
                if(html) {
                    $("#postswrapper").append(html);
                    $('div#loadmoreajaxloader').hide();

                    pageNumber++;
                    loading = false;
                } else {
                    $('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
                }
            }
        }); // close AJAX
    }  // close if()
}); // close $(window)

到达容器底部时加载AJAX

2 个答案: