2

我在页面上向下滚动时正在加载信息。但目前，当我开始滚动时，正在下载更多信息以显示。有没有办法让滚动到达页面末尾显示一条快速消息，持续 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);
            }
        });
    };
4

3 回答 3

1

经过大量研究和用户对这篇文章的有用答案建议，这就是我想出的，它最终按我想要的方式工作：

 $(document).ready(function () {
    $('#main').scroll(function () {
        var div = $(this);
        if (div[0].scrollHeight - div.scrollTop() == div.height()) {
            Next();
        }
    });
});
于 2013-04-19T12:44:56.920 回答
1

**

更新程序

**

<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>
于 2013-04-18T17:06:56.637 回答
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);
    }

});
于 2013-04-18T14:24:27.957 回答