Question

我已经编写了基本的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);
});

Answer 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(); });
};

所有滚动事件分配都在函数的第三行上未绑定。注释掉这一行解决了这个问题，并没有对加载图像产生明显的影响。


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

在Ajax调用被prettyLoader中断后重新绑定滚动操作

1 个答案: