Question

我看不出我做错了什么。但是我在滚动时用来加载更多图像的代码无法正常工作。 ajax请求工作得很完美，但是当我只是触摸我的滚动时，我的代码加载图像时遇到了很大的问题。我希望它在我到达页面底部时加载新图像，而不是每次触摸滚动时都加载。

代码：

<script type="text/javascript">
    $(window).scroll(function() {
        if($(window).scrollTop() + $(window).height() >= $(document).height() -300) {

            $('div#more').show();
            $.ajax({
                url: "more.php?last=" + $('.fap:last').attr('id'),
                success: function(html) {
                    if (html) {
                        $('#photos').append(html);
                        $('div#more').hide();
                    }
                    else {
                        $('div#more').replaceWith('<center>No more images</center>')
                    }
                }
            });
        }
    });
</script>

任何人都知道如何解决这个问题？

Answer 1

也许一个信号变量可以做到：

var is_loading = false;
$(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() >= $(document).height() -300) {
        if (is_loading) {
            return;
        }
        is_loading = true;
        $('div#more').show();
        $.ajax({
            url: "more.php?last=" + $('.fap:last').attr('id'),
            success: function(html) {
                if (html) {
                    $('#photos').append(html);
                    $('div#more').hide();
                }
                else {
                    $('div#more').replaceWith('<center>No more images</center>')
                }
            }
        }).always(function() { is_loading = false; });
    }
});

Jquery无限滚动一直加载

1 个答案: