Wilcovanmeppelen Wilcovanmeppelen - 7 months ago 15
HTML Question

Show only next 10 divs

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.


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

For now I have this code:

$(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);
}

});

});


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

Answer

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

In your case, the following might do the trick:

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

With:

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

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

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