无限滚动错误,重复下一个10条记录,而不是填充更多


Infinite scroll bug, repeating next 10 records instead of populating more

我没有使用INFINITE SCROLL插件。

我在数据库中有大约545条记录,现在我想一次显示10条。(测试)

前10条记录完美显示,当我向下滚动时,它也拉出下一个新的10条记录。不幸的是,接下来的10个新记录被重复了大约10次。

不是重复新的10条记录,我希望它拉出下一个10个额外的记录,以及下一个10和下一个10等等…每次我向下滚动到页面底部。

MY PHP &JQUERY

$stmt = $db -> query ('SELECT * FROM course LIMIT 0,10');
            $count = $db -> query ('SELECT * FROM Course');
            $nbr = $count->rowCount();
<script>
    jQuery(document).ready(function() {
        var load = 0;
        jQuery(window).scroll(function(){
            if(jQuery(window).scrollTop()== jQuery(document).height()-jQuery(window).height())
            {
               load++;
                jQuery.post("ajax.php", {load:load}, function(data){
                    jQuery('.wrap').append(data);
                })
            }
        });
    });
</script>

My Ajax.php FILE

$load = htmlentities(strip_tags($_POST["load"]))*10;
$query = $db -> query ("SELECT * FROM course LIMIT ".$load.",10 ");
while($row = $query->fetch()) {
?>

当你向下滚动时,你应该检查你是否已经在加载。所以添加一个变量来跟踪你是否正在加载:

<script>
    jQuery(document).ready(function() {
        var isLoading = false;
        var load = 0;
        jQuery(window).scroll(function(){
            if(!isLoading && jQuery(window).scrollTop()== jQuery(document).height()-jQuery(window).height())
            {
                isLoading = true;
                load++;
                jQuery.post("ajax.php", {load:load}, function(data){
                    jQuery('.wrap').append(data);
                }).always(function() {
                    isLoading = false;
                });
            }
        });
    });
</script>
相关文章: