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

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

javascript jquery

Javascript 在加载更多用户之前，滚动未到达页面末尾,javascript,jquery,Javascript,Jquery,我在页面上向下滚动时正在加载信息。但目前，随着我开始滚动，更多的信息正在下载以显示。有没有办法让卷轴到达页面末尾，显示一条快速消息，持续2秒钟“加载更多图像”，然后显示下一批图像 function updateStatus() { // Load more users on Scroll $('#main').scroll(function () { if ($('#main').scrollTop() >= $(document).height() - $('#main').

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

使用current edit，当我滚动到页面底部时，它将加载接下来的20个用户，但再次到达页面末尾时，它将不再加载。但是当我使用

setTimeout（updateStatus，2500）

并将其放在

$（“#main”）中时。滚动…

当我滚动时，没有一点到达页面底部，数据在到达页面末尾之前不断加载

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

更新程序


$（文件）。就绪（
函数（）{
$（窗口）。滚动(
函数（）{
if（$（窗口）.scrollTop（）==$（文档）.height（）-$（窗口）.height（））//页尾
{
$（“#status”）.html（函数（n）{//用于加载
setTimeout（函数（）{
$（“#包装器”）.append（函数（n）{//在此处添加用户
$（“#status”）.html（“”）；
返回“


；
});
}, 2000);
返回“加载…”；
});
}
});
});




















/
>

































你好

经过大量的研究和用户在这篇文章中提出的有用的回答建议，我想到了这一点，它最终按照我的要求运行：

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

检查您是否尝试过setTimeout函数？@guggly是-我刚刚更新了代码，现在我根本没有加载在包装

updateStatus（）

中的内容之前加载的数据，并且设置

setTimeout（）

您必须将事件处理程序移到函数声明之外。现在，

updateStatus（）

从未被调用过。越来越近-只是尝试了一下，在第一次等待时告诉我我已接近底部，然后加载下一批，然后开始加载所有内容。所以这是第一次工作，但不是在那之后，IDK，真的。可能将滚动事件处理程序放在

$（窗口）

上，而不是

#（'#main'）

。另外，可能需要一对

console.log（）

，以查看实际执行的是什么。。。现在我真的不能抽出时间为你调试。谢谢你的帮助，我将离开你刚才提到的，四处测试，看看我得到了什么，希望它会很简单。我将更新我的代码并解释我当前的问题-希望它的修复会很快，因为这看起来我将不得不改变很多。好的，所以我更新了我的代码我在上面的更新中解释了这一点。当前，当我滚动到页面底部时，它会加载下一组信息，然后当我滚动到不再加载的页面底部时，它会停止。当我在scroll函数中设置setTimeout时。我以卷轴的形式加载数据，但不是等到我到达页面的末尾。要么我做错了什么，要么建议没有起作用。好的。您不认为在成功地从服务器端接收数据时显示新帖子更好吗？

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);
    }

});

<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>

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