Question

我有这个用于加载数据的代码。当用户向下滚动屏幕的一半时，它会继续加载数据并将HTML附加到文档。 The problem is $(window).height() doesn't update on the fly after HTML changes所以条件表达式出错了。如何解决？

// Check scrollbar is down a half.
$(window).scroll(function() {
    console.log("flag: " + flag);       
    console.log($(window).scrollTop());
    console.log($(window).height());

    if (($(window).scrollTop()  > $(window).height() / 2)) { 
        if(flag == 0) {
            console.log("Load data");
            loadData(globalIndex, globalCount);
            globalIndex += 40;
        }
        flag = 1;

    } else {
        flag = 0;
    }
});

Answer 1

除非您调整浏览器屏幕的大小，否则窗口的高度不会改变。您的公式的问题是，为了使其工作，您需要加载足够的数据以将滚动条移回中点以上。如果你不这样做，这个公式将不断返回true，你将调用loadData的次数远远超过你想要的次数。

作为潜在的解决方法（取决于加载数据所需的时间），您可以在滚动条到达窗口底部时调用loadData。这种情况将比您当前的情况更频繁，并且只有在您的用户尝试查看数据时才会加载数据。如果数据加载速度很快，那么这是一个简单的解决方案。如果这是一个耗时的过程，这就是你选择在中途点加载数据的原因，那么考虑一次加载更多的数据，包括微调器或其他一些视觉线索，告知用户数据是负荷。

Answer 2

$(window).height()

将为您提供浏览器的高度（除非您调整窗口大小，否则它是常量）。尝试使用：

$(document).height() - ($(window).height()/2);

，而不是...

$（window）.height（）不会动态更新

2 个答案: