1

私はInfinite Load（Lazy Loadなど）タイプの機能に取り組んでいます。これまでの機能は次のとおりです。

$(window).scroll(function() {
       var ScrollPosition = $(window).scrollTop() + $(window).height();
       var LoadMorePosition = $(document).height()-100;
       if( ScrollPosition == LoadMorePosition ) {
           console.log('loading more');
           loadMoreItems();
       }
    });

loadMoreItems人がしきい値までスクロールすると、関数が20〜30回呼び出されることを除いて、ほとんどの部分で機能しています。

私は setTimeout タイプのものがうまくいくかもしれないと考えていましたが、Ajax コンテンツが十分に速くロードされた場合にのみうまくいくことに気付きました (これは保証されていません)。

私が必要としているのは、それらがしきい値に達したかどうかを検出し、スクロールしきい値に再度達するまで関数を 1 回だけ呼び出す方法です。

4

3 に答える 3

1

次のようにできます。

var loadOnce = function(fn) {
  var loadedPages = {};
  return function(page) {
    var key = 'p'+page;
    if (typeof loadedPages[key] === 'undefined') {
      fn.apply(fn, arguments);
      loadedPages[key] = true;
    }
  };
};

var loader = loadOnce(function(page) {
  /* Ajax Request */
});

// Will only fire the ajax request once:
loader(1);
loader(1);
loader(1);
loader(1);
于 2013-03-02T21:11:12.820 に答える
0

私は setTimeout タイプのものがうまくいくかもしれないと考えていましたが、考え直してみると、Ajax コンテンツが十分に速くロードされた場合にのみうまくいくことに気付きました (これは保証されていません)。

次に、タイムアウトに依存しないでください。代わりに、AJAX 要求の成功\完了時にフラグをリセットします。

于 2013-03-02T21:02:09.433 に答える
0

AJAX 呼び出しの成功部分では、さらにコンテンツをロードするフラグを設定する必要があるため、他にコンテンツがない場合はロードしません。

スクロールの場合は、タイムアウトを設定して、ユーザーがスクロールを停止したことを検出し、gif の読み込みを表示して ajax を実行し、成功したら、gif を非表示にして、さらに読み込む:D

$(window).scroll(function(){
  clearTimeout(scrolled);
  scrolled = setTimeout(function(){
  //Your function when user stops scrolling
  }, 100);
});
于 2013-03-02T21:58:48.573 に答える