Question

我试图破解一个网站的无限滚动系统，但遇到了问题。

基本上有一个包含大量<li>元素的div。

此函数对div进行切片，并在前20后隐藏每个<li>元素。一旦滚动到页面底部，它会显示所有内容并立即切成40，然后再次隐藏其余部分。

$("#CategoryContent li").slice(20).hide();    

$(window).scroll(function() {
       if($(window).scrollTop() + $(window).height() == $(document).height()) {
            $("#CategoryContent li").show();
           $("#CategoryContent li").slice(40).hide();
       }
    });

我非常希望在所有内容加载之前无限发生。

使用不同的切片编号添加相同的代码显然不起作用。那我该怎么做呢？

将第一个切片的值存储在变量中，一旦执行了该函数，将该变量增加20？

我已经搜索了插件以便为我处理这个问题，但他们都依赖于目前不适合选择的分页。

Answer 1

它很贵，但你可以获得可见元素的数量，然后加20。在致电$("#CategoryContent li").show()之前，您可以这样做：

var visibleItems = $("#CategoryContent li").filter(function( i, el ) {
    return $(el).css("display") !== "none";
});

这将返回$（“＃CategoryContent li”）集合中没有将其display属性设置为none的所有项目。

然后您可以将切片调用更新为：

$("#CategoryContent li").slice(visibleItems.length + 20).hide();

话虽这么说，更好的方法是手动跟踪计数，只需将函数包装器放在整个事物周围。

(function ( ) {
    var visibleCount = 20;

    $(window).scroll(function() {
       if($(window).scrollTop() + $(window).height() == $(document).height()) {
           visibleCount += 20;
           $("#CategoryContent li").show();
           $("#CategoryContent li").slice(visibleCount).hide();
       }
    });
}());

Answer 2

我要做的第一件事就是缓存你的选择器。有道理，因为看起来你一直都在使用它。

var category_content_lis = $('#CategoryContent li');

接下来，我可能不会为此.slice而烦恼。我最有可能只是使用类似:lt()选择器的东西来微调我的选择器。

想法是隐藏所有内容然后以增量显示它们。

category_content_lis
    .hide()
    .filter(':lt(20)')
    .show()
    ;

现在，如果你只是以20的增量显示它们，那么你可以做这样的事情来触发显示下一个20：

category_content_lis
    .filter(':hidden:lt(20)')
    .show()
    ;

...如果您愿意，可以方便地封装在一个函数中。无论你的名单有多长，这都可行。

请注意，我们并未隐藏显示所选内容的所有然后。这样的事情会导致闪烁，这只会令人恼火，may or may not cause epilepsy。（我在最后一部分开玩笑。）

Answer 3

我最终做了这个

var mincount = 20;
var maxcount = 40;


$(window).scroll(function() 
                    {
                    if($(window).scrollTop() + $(window).height() >= $(document).height() - 400) {
                            $("#CategoryContent li").slice(mincount,maxcount).fadeIn(800);

mincount = mincount+20;
maxcount = maxcount+20

}
});

如何只运行一次函数，然后运行另一个依赖于相同元素的函数

3 个答案: