Javascript 使用jQuery和php将更多内容加载到infifnite滚动

最近，我使用php和jquery开发了加载更多功能。请看我的密码

Html

在

result.php

中，我编写了db连接代码和以下查询

$query = 'SELECT * FROM `product` ORDER BY id DESC  LIMIT 15';
$query_1 = 'SELECT * FROM `product` ORDER BY id DESC';

if (ISSET($_POST['y_id'])) {
    $appear = implode("', '", $_POST['y_id']);
    $query = "SELECT * FROM `product` WHERE id NOT IN('{$appear}')  ORDER BY id DESC  LIMIT 15";
    $query_1 = "SELECT * FROM `product` WHERE id NOT IN('{$appear}') ORDER BY id DESC";
}
$result = $conn->query($query);
$result_1 = $conn->query($query_1);
$total_num = $result_1->num_rows;
echo '<div class="container clearfix product-output">';

if ($result->num_rows > 0) {

    while ($row = $result->fetch_assoc()) { ?>

        <div class="col-sm-2 im-product-block" id="<?php echo $row["id"]; ?>">

            <p class="product-name"> <?php echo $row["name"]; ?></p></div>

    <?php }
    echo '</div>';

    if ($total_num > 15 && $_POST[load_num] == 0) {
        echo '<div class="load-more-div"><p class="load-more"> Load More</p></div>';
    }
    if ($total_num < 15) {
        echo '<input type="hidden" name="hide-load" class="hide-load" value="1">
<div class="load-finished"><p class="load-f"> All Products Loaded Successfully</p></div>';
    }

}

---

但在这里，执行被无限延续，它不会停止。请检查这段代码并建议一个好方法

我认为在进行ajax调用并将其写入页面时，您需要停止执行加载。也许可以设置一个布尔变量来决定是否需要加载更多

e、 g

---

ajax函数完成并加载数据后，将

canLoad

设置回true。

加载更多代码的确切位置。我的问题类似，但不知道答案在哪里。非常感谢。请帮助如果（$total_num>15&&$_POST[load_num]==0）{echo'

load more

'}如果（$total_num<15）{echo'

所有产品成功加载

'}，请仔细阅读这一行。谢谢您的回复。我在问你把你接受的答案放在哪里。我能看看你是怎么换的吗。再次感谢您的回复您是如何将您接受的答案与上面的代码结合起来使用ajax的。我有更多的工作手动加载，但想在Scroll上自动加载。请将$（“.load more”）。在（“click”，function（）{…}上替换为选中的答案。

$.ajax({
    method: "POST",
    url: "result.php",
    data: { keyword:"all"}
}).done(function( msg ) {
    $( ".product-output" ).html(msg);
    $(".load-more").on("click",function(){
        var load_num= $('.load-more').length;
        var appear=[];
        $(".im-product-block").each(function(){
            appear.push($(this).attr('id'));
        });
        $.ajax({
            method: "POST",
            url: "result.php",
            data: { keyword: "all", y_id: appear, load_num: load_num }
        }).done(function(msg1){
            $('.load-more-div').before(msg1);
            if($(".hide-load").val()==1){
                $(".load-more").hide();
            }
        });

    });
});

$query = 'SELECT * FROM `product` ORDER BY id DESC  LIMIT 15';
$query_1 = 'SELECT * FROM `product` ORDER BY id DESC';

if (ISSET($_POST['y_id'])) {
    $appear = implode("', '", $_POST['y_id']);
    $query = "SELECT * FROM `product` WHERE id NOT IN('{$appear}')  ORDER BY id DESC  LIMIT 15";
    $query_1 = "SELECT * FROM `product` WHERE id NOT IN('{$appear}') ORDER BY id DESC";
}
$result = $conn->query($query);
$result_1 = $conn->query($query_1);
$total_num = $result_1->num_rows;
echo '<div class="container clearfix product-output">';

if ($result->num_rows > 0) {

    while ($row = $result->fetch_assoc()) { ?>

        <div class="col-sm-2 im-product-block" id="<?php echo $row["id"]; ?>">

            <p class="product-name"> <?php echo $row["name"]; ?></p></div>

    <?php }
    echo '</div>';

    if ($total_num > 15 && $_POST[load_num] == 0) {
        echo '<div class="load-more-div"><p class="load-more"> Load More</p></div>';
    }
    if ($total_num < 15) {
        echo '<input type="hidden" name="hide-load" class="hide-load" value="1">
<div class="load-finished"><p class="load-f"> All Products Loaded Successfully</p></div>';
    }

}

$(window).scroll(function() {
    var hT = $(".load-more").offset().top,
        hH = $(".load-more").outerHeight(),
        wH = $(window).height(),
        wS = $(this).scrollTop();
    if (wS > (hT+hH-wH)){
        $(".load-more").trigger("click");
    }
});

var canLoad = true;

$(window).scroll(function() {
    var hT = $(".load-more").offset().top,
        hH = $(".load-more").outerHeight(),
        wH = $(window).height(),
        wS = $(this).scrollTop();
    if (wS > (hT+hH-wH) && canLoad){
        canLoad = false;
        $(".load-more").trigger("click");
    }
});