等到无限滚动完成加载 - Javascript答案

【问题标题】：Wait Until Infinite Scroll Finishes Loading - Javascript等到无限滚动完成加载 - Javascript
【发布时间】：2016-08-15 05:54:04
【问题描述】：

我正在处理一个“无限滚动”页面，当用户滚动到页面底部时，该页面一次调用多达 40 个元素。如何检测最新集合的所有内容已加载的时刻？

这仅适用于初始页面加载：

$(window).load(function() {
    // Do something
});

在页面加载完成很久之后“加载”时是否有类似的情况？

对不起，如果这是另一个问题的重复。我无法在其他任何地方找到解决方案。

【问题讨论】：

如果它是无限的，你怎么能等到最后呢？大声笑
@AdamBuchananSmith - 我说的是下一组元素何时完成加载。无限滚动不会一次加载所有可能的数据，只是数据的增量，直到用户执行加载下一个增量的操作（通常是页面底部附近的滚动）。我想正确检测最近的增量何时完成渲染。
我从没看过问题，我只看过标题

标签： javascript html jquery jquery-events infinite-scroll

【解决方案1】：

经过一番挖掘，我使用了这个question/answer 的变体。

我的最终结果如下所示：

function ($container, previousCount, callback) {
    var _imgs = $container.find('img'),
        _newImages = _imgs.slice(previousCount), // 'start index' for new images
        imgCount = _newImages.length, // count how many new ones exist
        counter = 0;

    _imgs.on('load', function() { // Count loaded
        runCallback(20, callback);
    }).on('error', function() { // Count errors, anyway, to reach total
        runCallback(20, callback);
    });

    function runCallback(counterLimit, callback) {
        // if counter meets new count or hits counter limit, run callback
        counter++;
        if (counter == imgCount || counter == counterLimit) {
            callback();
        }
    }
}

我为什么需要这种方式的一些怪癖。 previousCount 实际上可以大于当前 DOM 中的图像总数，这是因为人们可以跳过无限滚动的不同部分。因此，还要检查counter == counterLimit。

另外，我需要在新的一组图像加载完成时运行一个脚本，无论它们是成功还是失败。这就是我使用.on('load' 和.on('error' 来增加计数的原因。我注意到有时图像可能会出错（在这种特殊情况下这很好）并且它会抛出计数并且永远不会触发回调。

===================

EDIT 04/27/16：我已经发现了一个可以为你处理这个问题的插件，并且似乎运行良好（除了在之前的加载完成加载之前的几个后续加载） .查看imagesLoaded。

【讨论】：