Question

我一直在遵循创建无限滚动/延迟加载的教程。 https://www.youtube.com/watch?v=oi1S-BpoMQY&feature=youtu.be

除了滚动时，AJAX会多次触发POST而不是1，一切正常。

$(document).ready(function() {
var page_num = 1;
load_page(page_num, false);

$(window).scroll(function() {
    if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
        page_num++;
        load_page(page_num, false)
    }
  }); 
});


function load_page(page_num, loading) {
if (loading == false) {
    loading = true;
    $.ajax({
        url: 'action/post.php',
        type: "post",
        data: {
            page_num: page_num
        },
        beforeSend: function() {
            $('#ajax-loader').show();
            return;
        }
    }).done(function(data) {
        $('#ajax-loader').hide();
        loading = false;
        $("#dynamic-posts").append(data);
    }).fail(function(jqXHR, ajaxOptions, thrownError) {
        $('#ajax-loader').hide();
    });
 }
}

Answer 1

问题似乎出在document.height-100中。我将其更改为50，它开始起作用。超过80会使滚动条中断。

Answer 2

我观察到变量加载总是错误的，因为它是作为参数发送的。我移动了范围变量的加载。它有助于按时间发送1个ajax。

$(document).ready(function() {
var page_num = 1;
var loading = false;
load_page(page_num);


$(window).scroll(function() {
    if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
        page_num++;
        load_page(page_num)
    }
  }); 
});


function load_page(page_num) {
if (loading == false) {
    loading = true;
    $.ajax({
        url: 'action/post.php',
        type: "post",
        data: {
            page_num: page_num
        },
        beforeSend: function() {
            $('#ajax-loader').show();
            return;
        }
    }).done(function(data) {
        $('#ajax-loader').hide();
        loading = false;
        $("#dynamic-posts").append(data);
    }).fail(function(jqXHR, ajaxOptions, thrownError) {
        $('#ajax-loader').hide();
        loading = false;
    });
 }
}

使用AJAX POST的无限滚动触发多次而不是1次

2 个答案: