0

基本的なjQueryの無限スクロール関数を作成しました。予想される動作は、無限スクロールのデザインパターンと一致しています。

ajaxサーバーの呼び出しが完了すると、スクロールイベントを再バインドします。

最初のajax呼び出しではすべてが期待どおりに機能しますが、何らかの理由でスクロールイベントがリバウンドされていません。関数をデバッグするためにコンソールデータを追加すると、コードはsetScrollingAction（）の最後まで実行されますが、スクロールイベントは発生しません。

私は何が欠けていますか？

// Function to make the ajax call, append the results and rebind the scroll event
function loadContent(opts) {
  $(opts.scrollTarget).unbind('scroll');
  $(opts.loaderObject).show();
  $.get($(opts.gridObject).attr('data-link'), function(data) {
    var $data = $(data);
    $(opts.gridObject).append($data.find(opts.appendObject));
    $(opts.loaderObject).hide();
    $(opts.gridObject).attr('data-link', $data.find(opts.gridObject).attr('data-link'));
    setScrollingAction(opts);
  });
};

// Function to set the loading action to the scroll event
function setScrollingAction(opts) {
  $(opts.scrollTarget).bind("scroll", function(event) {
    if (inLoadingRange(opts)) { loadContent(opts); }
  });
};

// Function to determine height from bottom of page
function inLoadingRange(opts) {
  var target = opts.scrollTarget;
  return ($(target).scrollTop()+opts.heightOffset >= $(document).height() - $(target).height());
};

// Fire it up
$(document).ready(function(){
  opts = {
    'scrollTarget': $(window),
    'loaderObject': "#loading",
    'gridObject'  : '#tileGrid',
    'appendObject': '.newItem',
    'heightOffset': 10
  };

  setScrollingAction(opts);
});
4

1 に答える 1

1

prettyLoaderプラグインとの競合であることがわかりました。

prettyLoader.js を調べると、次の関数が見つかります。


$.prettyLoader.hide = function() {
  $(document).unbind('click', $.prettyLoader.positionLoader);
  $(document).unbind('mousemove', $.prettyLoader.positionLoader);
  $(window).unbind('scroll');
  $('.prettyLoader').fadeOut(settings.animation_speed, function() { $(this).remove(); });
};

すべてのスクロール イベントの割り当ては、関数の 3 行目でアンバインドされています。この行をコメントアウトすると問題が解決し、読み込み中の画像に目立った影響はありませんでした。


$.prettyLoader.hide = function() {
  $(document).unbind('click', $.prettyLoader.positionLoader);
  $(document).unbind('mousemove', $.prettyLoader.positionLoader);
  //$(window).unbind('scroll');
  $('.prettyLoader').fadeOut(settings.animation_speed, function() { $(this).remove(); });
};
于 2012-10-16T16:50:03.290 に答える