在滚动期间获得无限滚动以触发,而不仅仅是在达到缓冲区时

时间:2012-12-02 18:26:05

标签: javascript jquery infinite-scroll

我正在使用Paul Irish的'无限滚动'jquery插件,它运行正常。

我希望在预先解雇时非常积极,所以我将bufferPx参数设置为1000

当我向下滚动足够远时,它的射击正常,但是只有在滚动停止后它才会触发,如果我在滚轮停止之前给我的滚轮轻弹并且到达底部,更新不会发射直到我击中在底部让我等待下一个结果集出现。

我希望的行为是在我还在积极滚动的同时更新火,这样如果我快速浏览我的列表,我就不必等到底部了。

有没有人知道如何实现这一点,我可以添加一个新的事件触发器,如果​​是这样,当滚动仍处于活动状态时我会使用什么触发器?

1 个答案:

答案 0 :(得分:1)

查看插件https://raw.github.com/paulirish/infinite-scroll/master/jquery.infinitescroll.js的源代码,我想说你需要修改以下代码:

event.special.smartscroll = {
    setup: function () {
        $(this).bind("scroll", event.special.smartscroll.handler);
    },
    teardown: function () {
        $(this).unbind("scroll", event.special.smartscroll.handler);
    },
    handler: function (event, execAsap) {
        // Save the context
        var context = this,
        args = arguments;

        // set correct event type
        event.type = "smartscroll";

        if (scrollTimeout) { clearTimeout(scrollTimeout); }
        scrollTimeout = setTimeout(function () {
            $.event.handle.apply(context, args);
        }, execAsap === "execAsap" ? 0 : 100);
    }
};

在此行}, execAsap === "execAsap" ? 0 : 100);上进行编辑:

event.special.smartscroll = {
    setup: function () {
        $(this).bind("scroll", event.special.smartscroll.handler);
    },
    teardown: function () {
        $(this).unbind("scroll", event.special.smartscroll.handler);
    },
    handler: function (event, execAsap) {
        // Save the context
        var context = this,
        args = arguments;

        // set correct event type
        event.type = "smartscroll";

        if (scrollTimeout) { clearTimeout(scrollTimeout); }
        scrollTimeout = setTimeout(function () {
            $.event.handle.apply(context, args);
        }, 0);
    }
};

说明:当您向下滚动页面时(连续或离散),“滚动”事件反复触发并调用上面代码中的handler: function(...)。在此方法内部,设置了一个计时器setTimeout,它将在触发滚动事件后100ms触发相应的无限滚动码。但是,此方法也会在方法{ clearTimeout(scrollTimeout); }内取消。

因此,只要用户继续滚动,定时器就会一直清除并再次设置,直到用户停止滚动。在最后一个滚动事件中,计时器已设置且永不清除,因此它将在100ms后触发并执行内容加载。我上面演示的编辑消除了这个等待期,并在用户到达页面底部时加载内容(即使他们仍在主动滚动)。

警告:作者可能会将此超时用于性能问题,但欢迎您在配置中对其进行测试。