0

我们有一个 Web 应用程序，当我们到达页面底部时，我们会自动加载更多内容，如下所示：

$window
.on('scroll', function () {
    var 
        $this = $(this)
    ;
    if ($this.scrollTop() == $document.height() - $window.height()
        && $('#product-list').hasClass('has-more')) {
        // load more content
    }
})

我们目前在没有更多可用内容时删除的父元素上使用“拥有更多”类。

我对这种方法不太满意，有什么想法吗？

4

2 回答 2

1

您可以设置和检查范围内的变量。所以你的例子是这样的：

!function() {
    var hasMore = true;

    $window.on('scroll', function () {
        var $this = $(this);

        if ($this.scrollTop() == $document.height() - $window.height() && hasMore) {
            // load more content & set hasMore to false if applicable 
        }
    })
}();

这里唯一的问题是设置hasMore页面加载。而不是做我所做的（把它放在一个自动执行的函数中）你可以写hasMore在页脚。随你（由你决定。

这种方法可以避免将类名重载为布尔值，并且可以节省查询 DOM 的成本（尽管它非常小）。

于 2012-03-12T18:01:30.250 回答
1

与其在has-more没有其他内容的情况下删除该类，并且（仍然）继续检查其在滚动事件上的存在，为什么不删除事件处理程序本身呢？

这样你就没有事件处理程序，也没有决策，直到你再次绑定它，当其他一些 ajax 事件告诉你现在有可用的内容时。

于 2012-03-12T18:06:08.563 回答