Infinity scroll s animací nějakého gifu

Ahoj lidi,


Mám následující kod:

Kód:

   x=4;
$(".articlemore").slice(0, x).show();    
    $(window).scroll(function() {
  if ($(window).scrollTop() > 500) {
         
        x = x+5; 
        $(".articlemore:hidden").slice(0, x).slideDown();
        
        
        if ($(".articlemore:hidden").length == 0) {
            $(".loading").fadeOut('slow');
        }
       
    };    
    });

A potřeboval bych, aby se to načítalo třeba po pěti jak budu sjíždět dolu po stránce.....5 postu 5 postu a tak, až nakonec....


Věděl by prosím někdo takhle jak to mám to načte hned všechno, když dám, ale on click tak se to načítá po tom kliku....

---------- Příspěvek doplněn 04.04.2019 v 18:36 ----------

Tohle se načte, až najedu úplně dolu..jak to udělat, aby to načítalo podle toho jak tím uživatel sjíždí dolu ?

Kód:

   x=4;
$(".articlemore").slice(0, x).show();    
    $(window).scroll(function() {
  var position = $(window).scrollTop();
  var bottom = $(document).height() - $(window).height();
      if( position == bottom ){     
        x = x+5; 
        $(".articlemore:hidden").slice(0, x).slideDown();
        
        
        if ($(".articlemore:hidden").length == 0) {
            $(".loading").fadeOut('slow');
        }
       
      } 
    });

Co třeba něco na tento způsob?

Kód:

$(window).on('scroll', function () {
	if ($(window).scrollTop() + $(window).height() > $(document).height() - 200) {
		...
	}
}

Ani tohle mi nenačítá po pěti položkách...... načte všechno.....a já bych chtěl pět položek ten animovaný gif a zase dolu bych jel a pět položek..a takhle, až dolu.... Zkusím ještě ten váš kod, ale myslím si, že je to všechno to samé... že v této části to nebude nic zásadního....

Kód:

var x=4;
$(".articlemore").slice(0, x).show();
  $(window).scroll(function(){
  $('.articlemore').each(function(){
    
    if(isScrolledIntoView($(this))){
    x = x+5; 
  $(".articlemore:hidden").slice(0, x).slideDown();  
  
    if ($(".articlemore:hidden").length == 0) {
            $(".loading").fadeOut('slow');
        }
    }
  
  });
});

function isScrolledIntoView(elem){
    var $elem = $(elem);
    var $window = $(window);

    var docViewTop = $window.scrollTop();
    var docViewBottom = docViewTop + $window.height();

    var elemTop = $elem.offset().top;
    var elemBottom = elemTop - $elem.height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}