加载内容后如何停止无限滚动

Posted 2023-05-07

【中文标题】加载内容后如何停止无限滚动

【英文标题】：How to Stop Infinite Scroll After Content Is Loaded

【发布时间】：2020-01-22 12:02:20

【问题描述】：

我创建了一个无限滚动，当它到达文档底部时会生成一组新图像。我希望这个无限滚动显示不同高度的图像，但我希望它在加载所有图像后停止。这是可待因：https://codepen.io/MakaylaElizabeth/pen/QWLYqRp

这是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);  
)

我尝试在每个 for 循环之后破坏生成项目功能，但没有结果。如果我可以提供更多信息，请告诉我。谢谢你。

【参考方案1】：

在您的 Infinite 函数中，当您没有更多项目时，取消绑定滚动事件。 在您的 GenerateItems 函数中，请参阅步骤中的我的 cmets。

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>

【讨论】：

感谢您的回复。我制作了一个 codepen，因为我的函数 GenerateItems 一遍又一遍地添加了整个图像，所以我无法完成这项工作。它不会减少并达到 0。codepen.io/MakaylaElizabeth/pen/QWLYqRp 你知道我如何在函数中加载这些数组以使其工作吗？我希望能够一次显示 8 张照片。

@Elizabeth 这应该做你现在想做的事

感谢@Arleigh 的帮助，我一直在尝试用代码解决这个问题。当用户单击某个部分时，我需要打破 while 循环。因为现在，照片按 while 循环的顺序加载，第 1 节和第 2 节不会显示照片，直到您滚动以加载第 3 节的更多内容。我更新了 codepen 以尝试解决此问题。我使用了一个引用全局变量的 continue 语句，但它不起作用。你能建议如何解决这个问题吗？谢谢。