0

次のように、ページの下部に到達すると、より多くのコンテンツを自動的にロードする Web アプリケーションがあります。

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

現在、利用可能なコンテンツがなくなったときに削除される親要素で「has-more」クラスを使用しています。

私はこのアプローチに満足していません。

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 に答える