基本无限滚动/延迟加载博客文章与纯JavaScript

Basic infinite scrolling/lazy loading blog posts with pure JavaScript

本文关键字：文章 JavaScript 延迟加载 无限 滚动      更新时间：2023-09-26

我正在寻找一个轻量级的解决方案(希望没有jQuery，但我愿意接受建议)来"延迟加载"一个很长的HTML页面，该页面在客户端索引了大量的博客文章。现有的大多数解决方案都采用AJAX从服务器端加载数据或处理分页。我需要找到一些东西，将工作与一个长页面，完全加载在客户端这是无限滚动。

所以HTML是这样的:

    <div id="blog-post">
      <h2 class="post-title">Cupcake ipsum.</h2>
      <img class="post-image" src="img/posts/cupcakeIpsum.jpg">
      <p class="preview">Cupcake ipsum dolor sit. Amet bear claw marzipan tootsie roll.</p>
      <hr>
    </div>

这个相同的摘录基本上是一遍又一遍地重复同样的方式。我基本上想在开始时显示3篇博客文章，一旦滚动到达视口底部，我想展示另一组3篇文章。

关于我如何用纯JavaScript实现这一点的任何想法?(ES6可能。)

你可能需要添加一些attr到你的#blog-postdiv。像visible类或其他东西(顺便说一句，添加id到重复的div不是一个好主意。您的脚本将失败，通常只适用于第一个项目。您需要使用class而不是id)。

window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
      // you're at the bottom of the page
      // console.log("Bottom of page");
      var posts = document.querySelectorAll('.blog-post:not(.visible)');
      
      for(i = 0; i < posts.length; i++){
        if(posts[i] != undefined && i < 3){
            posts[i].className += "visible";          
        }  
      }
    }
};
.blog-post{
  /*display:none;*/
  opacity:0;
  transition: opacity 5s;
}
.visible{
  /*display:block !important;*/
  opacity:1;
}
<div class="blog-post visible">
      <h2 class="post-title">Cupcake ipsum.</h2>
      <img class="post-image" src="http://placehold.it/350x150">
      <p class="preview">Cupcake ipsum dolor sit. Amet bear claw marzipan tootsie roll.</p>
      <hr>
</div>
<div class="blog-post">
      <h2 class="post-title">Cupcake ipsum.</h2>
      <img class="post-image" src="img/posts/cupcakeIpsum.jpg">
      <p class="preview">Cupcake ipsum dolor sit. Amet bear claw marzipan tootsie roll.</p>
      <hr>
</div>
<div class="blog-post">
      <h2 class="post-title">Cupcake ipsum.</h2>
      <img class="post-image" src="img/posts/cupcakeIpsum.jpg">
      <p class="preview">Cupcake ipsum dolor sit. Amet bear claw marzipan tootsie roll.</p>
      <hr>
</div>

滚动方法取自&测试:https://stackoverflow.com/a/31264162/2259466

注意:在我的代码中，转换没有像预期的那样工作。你也需要使用display none，但你不能使用动画(实际上你可以，但需要解决方案)。或者你可以在js中使用动画，难度更大。

所以在一般代码中需要看起来像它。我知道它还没有完成，但我希望它能给你一个概念。
相关文章：