仅显示接下来的10个div [英] Show only next 10 divs

问题描述

我有一个包含生成的div的列表，如下所示:

I have a list with generated divs like this:

<div class="news-loaded">...</div>
<div class="news-loaded">...</div>
<div class="news-loaded">...</div>
<div class="news-loaded">...</div>
etc.

在滚动时，我要淡入10格并显示一个假的加载器.

On scroll I want to fade in 10 divs and show a fake loader.

现在我有以下代码:

$(window).scroll( function(){
    $('.ajax-loader').each( function(i){

        var bottom_of_object = $(this).offset().top + $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height();
        if( bottom_of_window > bottom_of_object ){
            $('.news-loaded').fadeIn(300);  
        }

    }); 

});

因此，如果可见ajax加载器div，则现在将加载所有div，但我只想加载接下来的几个div.

So if the ajax loader div is visible it now loads ALL divs but I just want to load the next few divs.

推荐答案

我确定有很多方法，但是我倾向于使用 slice().

I'm sure there's lots of ways, but I tend to use slice().

在您的情况下，以下方法可以解决问题:

In your case, the following might do the trick:

替换:$('.news-loaded').fadeIn(300);

使用:

$('.news-loaded').slice(0, 9).fadeIn(300); 

编辑:感谢此增强版的 freedomn-m :

Credit to freedomn-m for this enhanced version of the above:

$('.news-loaded').not(':visible').slice(0, 9).fadeIn(300);

这篇关于仅显示接下来的10个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！