无限卷轴错误，重复下10条记录而不是填充更多

I am not using the INFINITE SCROLL plugin.

I have about 545 records in the database and I want to display them 10 at a time for now..(testing purposes)

The first 10 records showing up perfectly and when I scroll down it pulls up the next new 10 records also. Unfortunately it is repeating those next new 10 records about 10 times.

Instead of repeating the new 10 records, I want it to pull up the next 10 additional records, and the next 10 and next 10 etc... every time I scroll down to the bottom of the page.

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()) {
?>

You should check if you are already loading when you scroll down. So add a variable that keeps track if you are loading or not:

<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>