Question

我正在构建一个图库（无限滚动），当我到达容器底部时，我正试图“加载更多内容”。（不是页面底部）

我的问题：我加载页面，一切都很好。我到达容器的底部，AJAX加载更多数据。这里的一切都很好......但是我的容器应该有更多的“高度”，因为它有新的数据。

但是如果我稍后滚动一下（不到达容器的新高度的底部），它会立即再次加载AJAX ......并且它会继续加载，就好像它取了原始的高度一样容器（没有新数据）。

一旦它到达容器的底部（包括每次加载的新数据），我需要它重新加载AJAX。

MY JS CODE：

<script type="text/javascript">

var pageNumber = <? echo $page; ?>;
var perPage = <? echo $perpage; ?>;

var processing = 0;

$(window).scroll(function() {
    if ($(window).scrollTop() + $(window).innerHeight() >=  $('#postswrapper').offset().top + $('#postswrapper').height() ) {

        if (processing == 1)
        return false;

        $('div#loadmoreajaxloader').show();

        processing = 1;
        pageNumber++;   

        $.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();
                        }
                        else
                        { $('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');  }
                    }
        }); // close AJAX

        processing = 0; 

    }  // close if($(window).scrollTop())
}); // close $(window).scroll

</script>

HTML OF MY CONTAINER：

<div style="display:flex; 
        flex-wrap: wrap; 
        justify-content: center; 
        align-content:  space-between;  
        background-color: #ffffff;
        width: 97%; " id="postswrapper">       </div>

到达容器问题底部时加载Ajax

0 个答案: