使用纯JavaScript

Question

我正在寻找一个轻量级的解决方案（希望没有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可能。）

Answer 1

您可能需要向attr div添加一些#blog-post。像visible类或其他东西一样（顺便说一句，将div添加到div中，重复这个不是一个好主意。你的脚本会失败，通常只适用于第一项。你需要使用class代替{ {1}}）。

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;
}

滚动方法取自＆amp;测试：https://stackoverflow.com/a/31264162/2259466

注意：我的代码中的转换未按预期工作。您也需要使用display none，但不能使用动画（实际上可以，但需要解决方法）。或者你可以用更难的方式在js中使用动画。

所以一般代码需要看起来像它。我知道它没有完成，但我希望它能让你了解它。