Question

我正在尝试在我的主页上实现无限滚动。但是，以下脚本将导致无限循环，因为$（document）.height（）永远不会更改。你能帮助我吗？我知道这是由css引起的，但我找不到解决方案。我尝试将代码放入$（window）.load和$（document）.ready但它不起作用。

while( $(document).height() <= $(window).height() ) {
load();//load the data at the bottom of the homepage
}

由于

Answer 1

看一下jQuery .scrollTop。

$(document).height() and $(window).height()将始终固定，不会更改。

但是，使用$(window).scrollTop()，您知道页面向下滚动了多远，这样您就可以在窗口底部添加窗口高度，然后在此处加载内容

Here is an example

Answer 2

问题是，在检查load之前，您永远不会让height有机会完成。 Javascript是单线程的，因此您的代码永远不会完成，get结果永远不会被处理。

您需要做的只是拨打load一次，然后在get的回调中，如果需要再试一次。

这样的事情应该有效：

function getMore(){
    if( $(document).height() <= $(window).height() ) {
        load();
    }
}

function load(){
    /* ... */
    $.get(/* ... */, function(){
        // after the first get completes, call getMore again
        getMore();
    });
}

您可能需要调整if条件才能准确地获取它，但这将解决无限循环的问题。您可能希望有一个包装器div并将该高度与window高度进行比较，而不是使用document。

JQuery：无限循环，因为$（document）.height（）还没有更新

2 个答案: