Question

我正在使用＆＃34;无限滚动＆＃34;当用户滚动到页面底部时，一次最多调用40个元素的页面。如何检测加载最新集的所有内容的时刻？

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

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

有什么类似的东西，当有＆＃34;加载＆＃34;页面已经完成加载后很久？

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

Answer 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'来计算。我注意到有时一个图像可能会出错（在这种特殊情况下这很好）并且它会抛弃计数并且永远不会触发回调。

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

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

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

1 个答案: