Question

当我向下滚动页面时，我正在加载信息。但目前我开始滚动更多信息正在下载显示。有没有办法让滚动到达页面的末尾显示一个快速消息，如2秒“加载更多图像”，然后显示下一批。

 function updateStatus() {

// Load more users on Scroll
$('#main').scroll(function () {
    if ($('#main').scrollTop() >= $(document).height() - $('#main').height()) {
        $('#status').text('Loading more items...');
        $('#users').append(Next());
    }
    setTimeout('updateStatus();', 1500);
});
}

建议更新后的答案

function updateStatus() {
        $('#users').append(Next());
    }

    // Load more users on Scroll
    $(document).ready(function(){
        $('#main').scroll(function () {
            if ($('#main').scrollTop() >= ($(document).height() - $('#main').height())) {
                $('#status').text('Loading more items...');
            }

        });
        setTimeout(updateStatus, 2500);
    });

使用当前编辑，当我滚动到页面底部时，它会加载接下来的20个用户，但随后再次到达页面末尾，它不会再加载。但是当我拿setTimeout(updateStatus, 2500)并将其放在$('#main').scroll...内时，当我滚动而没有一点点到达页面底部时，数据会在到达页面末尾之前保持加载和加载。

Next = function () {
    var _page = $.views.Roster.ViewModel.CurrentPage() + 1;
    $.views.Roster.GetPage("/api/Roster", 9, _page);
};

$.views.Roster.GetPage = function (url, id, pageNumber) {
        $.grain.Ajax.Get({
            Url: url,
            DataToSubmit: { pageNumber: pageNumber, id: id },
            DataType: "json",
            OnSuccess: function (data, status, jqXHR) {
                $.views.Roster.RosterViewModel.AddUsers(data);
                $.views.Roster.ViewModel.CurrentPage(pageNumber);
            }
        });
    };

Answer 1

也许你正在寻找这样的东西？（未经测试的代码）

function updateStatus() {
    $('#status').text('');
    $('#users').append(Next());
}

// Load more users on Scroll
$('#main').scroll(function () {
    if ($('#main').scrollTop() >= $(document).height() - $('#main').height()) {
        $('#status').text('Loading more items...');
        setTimeout(updateStatus, 1500);
    }

});

Answer 2

**

更新程序

**

<script type="text/javascript">
$(document).ready( 
    function(){
    $(window).scroll(
    function(){
        if($(window).scrollTop()== $(document).height()-$(window).height()) //End of Page
        {
            $("#status").html(function(n){// For Loading
                    setTimeout(function(){
                    $("#wrapper").append(function(n){// Add the users here
                        $("#status").html("");

                            return "<p><br/><br/><br/>Added</p>";
                        });
                }, 2000);
                return "<p>Loading...</p>";
                });

        }
    });
});
</script>
</head>

<body>
    <div id="main">


<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><b

r/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/

><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
Hello

        <div id="wrapper"></div>
        <div id="status"></div>
    </div>
</body>

Answer 3

经过大量的研究和用户在这篇文章中给出了有用的答案建议，这就是我的想法，它终于按照我的意愿运作了：

 $(document).ready(function () {
    $('#main').scroll(function () {
        var div = $(this);
        if (div[0].scrollHeight - div.scrollTop() == div.height()) {
            Next();
        }
    });
});

在加载更多用户之前滚动未到达页面末尾

3 个答案: