Nur nächsten 10 divs

Question

Ich habe eine Liste mit generierten divs wie folgt aus:

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

Auf Scroll I in 10 divs verblassen wollen und eine gefälschte loader zeigen.

Für jetzt habe ich diesen 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); 
     } 

    }); 

}); 

Also, wenn der Ajax-loader div es lädt alle divs jetzt sichtbar ist, aber ich möchte nur die nächsten paar divs laden.

Answer 1

Ich bin sicher, es gibt viele Möglichkeiten, aber ich neige dazu, slice() zu verwenden.

In Ihrem Fall Folgendes könnte den Trick tun:

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

mit:

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

EDIT: Credit freedomn-m für diese verbesserte Version des oben:

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