How to Stop Infinite Scroll After Content Is Loaded

Question

I created an infinite scroll that generates a new set of images when it gets to the bottom of the document. I want this infinite scroll to reveal images at different heights but I want it stop after all images are loaded. Here is the codeine: https://codepen.io/MakaylaElizabeth/pen/QWLYqRp

Here is a portion of the JS:

function GenerateItems(){
    var items = '';
    for(var i=0; i < Imgs1.length; i++){
      items += '<div class="grid-item c'+(2)+'" ><img src="'+Imgs1[i%Imgs1.length]+'" /></div>';  
      }
      for(var i=0; i < Imgs2.length; i++){
      items += '<div class="grid-item c'+(1)+'" ><img src="'+Imgs2[i%Imgs2.length]+'" /></div>'; 
      }
      for(var i=0; i < Imgs3.length; i++){
      items += '<div class="grid-item c'+(0)+'" ><img src="'+Imgs3[i%Imgs3.length]+'" /></div>'; 
      }
    return $(items); 
  }

/*SimpleInfiniteScroll */
  function Infinite(e){
    if((e.type == 'scroll') || e.type == 'click'){
      var doc = document.documentElement;
      var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
      var bottom = top + $(window).height();
      var docBottom = $(document).height();

      if(bottom + 10 >= docBottom){
        $grid.revealItems(GenerateItems());
      }
    }
  }


  $grid.revealItems(GenerateItems());

  $(document).on('click','.filter-item',function(){
    $('.filter-item.active').removeClass('active');
    $(this).addClass('active');
    var f = $(this).data('f');
    console.log(f);
    $grid.find('.grid-item');
    $grid.isotope({filter: f});
  });


   $(window).scroll(Infinite);  
})

I've tried breaking the generate items function after every for loop and had no results. Please let me know if I can provide any more information. Thank you.

Arleigh Hix · Accepted Answer · 2019-09-24T07:16:51.933

In your Infinite function unbind the scroll event when you have no more items.
In your GenerateItems function see my comments in the steps.

var Imgs1 = [
  "https://tympanus.net/Development/GridLoadingEffects/images/1.jpg",
  "https://tympanus.net/Development/GridLoadingEffects/images/1.jpg",
  "https://tympanus.net/Development/GridLoadingEffects/images/1.jpg",
  "https://tympanus.net/Development/GridLoadingEffects/images/1.jpg",
  "https://tympanus.net/Development/GridLoadingEffects/images/1.jpg",
  "https://tympanus.net/Development/GridLoadingEffects/images/1.jpg"
];

var Imgs2 = [
  "https://tympanus.net/Development/GridLoadingEffects/images/8.jpg",
  "https://tympanus.net/Development/GridLoadingEffects/images/8.jpg",
  "https://tympanus.net/Development/GridLoadingEffects/images/8.jpg",
  "https://tympanus.net/Development/GridLoadingEffects/images/8.jpg",
  "https://tympanus.net/Development/GridLoadingEffects/images/8.jpg",
  "https://tympanus.net/Development/GridLoadingEffects/images/8.jpg"
];

var Imgs3 = [
  "https://tympanus.net/Development/GridLoadingEffects/images/12.png",
  "https://tympanus.net/Development/GridLoadingEffects/images/12.png",
  "https://tympanus.net/Development/GridLoadingEffects/images/12.png",
  "https://tympanus.net/Development/GridLoadingEffects/images/12.png",
  "https://tympanus.net/Development/GridLoadingEffects/images/12.png",
  "https://tympanus.net/Development/GridLoadingEffects/images/12.png",
  "https://tympanus.net/Development/GridLoadingEffects/images/12.png",
  "https://tympanus.net/Development/GridLoadingEffects/images/12.png"
];

$(document).ready(function() {
  $grid = $(".filterGallery");

  $.fn.revealItems = function($items) {
    var iso = this.data("isotope");
    var itemSelector = iso.options.itemSelector;
    $items.hide();
    $(this).append($items);
    $items.imagesLoaded().progress(function(imgLoad, image) {
      var $item = $(image.img).parents(itemSelector);
      $item.show();
      iso.appended($item);
    });

    return this;
  };

  $grid.isotope({
    masonry: {
      gutter: 20,
      fitWidth: true,
      columnWidth: 300
    },
    itemSelector: ".grid-item",
    filter: "*",
    transitionDuration: "0.4s"
  });

  $grid.imagesLoaded().progress(function() {
    $grid.isotope();
  });
  
  /* Array Loop */

  function GenerateItems(max) {
    var items = [];
    var img_src;
    // while there are items in Imgs1 remove the first one 
    while (img_src = Imgs1.shift()) {
      // and push it into items
      items.push('<div class="grid-item c' + 2 + '" ><img src="' + img_src + '" /></div>');
      // if we have the max number of items stop and return them
      if (items.length === max) return $(items.join(""));
    }    
    // after Imgs1 is emptied start collecting from Imgs2
    while (img_src = Imgs2.shift()) {
      items.push('<div class="grid-item c' + 1 + '" ><img src="' + img_src + '" /></div>');
      if (items.length === max) return $(items.join(""));
    }
    while (img_src = Imgs3.shift()) {
      items.push('<div class="grid-item c' + 0 + '" ><img src="' + img_src + '" /></div>');
      if (items.length === max) return $(items.join(""));
    }
    // if we make it to here all 3 arrays have been emptied, and we have less than the max
    // return what there is
    return $(items.join(""));
  }

  /* SimpleInfiniteScroll */
  function Infinite(e) {
    if (e.type == "scroll" || e.type == "click") {
      var doc = document.documentElement;
      var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
      var bottom = top + $(window).height();
      var docBottom = $(document).height();

      if (bottom + 10 >= docBottom) {
        // pass the max number of items to generte
        let items = GenerateItems(8);
        if (items.length == 0) {
          // out of items
          $(window).off("scroll", Infinite);
        } else {
          $grid.revealItems(items);
        }
      }
    }
  }

  /* Filter on Click */
  $grid.revealItems(GenerateItems(8));

  $(document).on("click", ".filter-item", function() {
    $(".filter-item.active").removeClass("active");
    $(this).addClass("active");
    var f = $(this).data("f");
    console.log(f);
    $grid.find(".grid-item");
    $grid.isotope({ filter: f });
  });

  $(window).scroll(Infinite);
});

body {
  margin: 0;
  padding: 0;
  width: 100%;
}

/* Gallery */
#gallery .filterGallery{
  width: 100%;
  margin: 20px auto !important;
}

.grid-item{
  width: 300px;
  padding: 20px;
}

#gallery img{
  display: block;
  position: relative;
  max-width: 100%;
}

.filterList li{
  cursor: pointer;
  display: inline-block;
  padding: 10px 12px 10px 12px;
}

.filterList li:hover{
  color: #000;
}

.filterList li.active{
  color: #000;
}

.filterList{
  background: #9F9C99;
  color: #fff;
  height: 40px;
  padding: 0;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js"></script>

<body>

<!-- Filter -->
<div class="filterList">
 <ul>
  <li data-f="*" class="filter-item active">All</li>
  <li data-f=".c0" class="filter-item">Section 1</li>
  <li data-f=".c1" class="filter-item">Section 2</li>
  <li data-f=".c2" class="filter-item">Section 3</li>
 </ul> 
</div>
  
<!-- Gallery Section (GS) -->
<div id="gallery">
<div class="filterGallery">
</div>
</div>  

</body>

Thank you for responding. I made a codepen because I haven't been able to make this work because my function GenerateItems adds the entire of images over and over again. It won't decrease and reach 0. https://codepen.io/MakaylaElizabeth/pen/QWLYqRp Do you know how I could load these arrays in the function to make this work? I want to be able to reveal 8 photos at a time. — Elizabeth, Sep 24 '19 at 04:22
Thanks @Arleigh for your help, I've been trying to work out this problem with the code for a while. I need to break up the while loop when a user clicks on a section. Because right now, photos load in the order of the while loop and section 1 and 2 won't show photos until you scroll to load more for section 3. I updated the codepen to try and fix this. I used a continue statement referring to the global variable, which does not work. Can you advise on how to fix this? Thank you. — Elizabeth, Oct 13 '19 at 01:13

How to Stop Infinite Scroll After Content Is Loaded

1 Answers1