Basic infinite scrolling/lazy loading blog posts with pure JavaScript

Question

I'm looking for a lightweight solution (hopefully without jQuery but I'm open to suggestions) to 'lazy load' a long HTML page which is indexing tons of blog posts on the client-side. Most of the solutions out there are geared towards AJAX to load data from the server-side or handling pagination. I need to find something that would work with a single long page that's entirely loaded on the client side which is infinitely scrolling.

So HTML goes like this:

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

This identical excerpt basically repeats the same way again and again. I basically want to show 3 blog-posts in the beginning and once the scrolling reaches the bottom of the viewport, I want to unveil another set of 3 posts.

Any ideas on how I could achieve this with pure JavaScript? (ES6 possible.)

What about the other 10 percent? In particular, this one: https://derickbailey.com/2015/11/18/finitely-iterating-infinite-data-with-es6-generators/ — Robert Harvey, Nov 14 '16 at 22:51
Why don't you try https://www.google.com/search?q=es6+infinite+scrolling+-react ? — Reeno, Nov 14 '16 at 22:51
@RobertHarvey The rest consisted of AJAX or solutions loading other HTML files. Checking the article on iteration, looks promising. — cinnaroll45, Nov 14 '16 at 22:58
@Jaromanda If your content is on the server-side, you just make AJAX requests to load more content. That's how most implementations work. My content is on the client-side page already, that's my problem. — cinnaroll45, Nov 14 '16 at 23:58
Exactly, I just need to reveal hidden divs as the user scrolls. — cinnaroll45, Nov 15 '16 at 00:00
@cinnaroll45 I think you should mention in your question that it's all client business — Vinay, Nov 15 '16 at 06:31

score 1 · Answer 1 · edited May 23 '17 at 12:34

You probably need to add some attr to your #blog-post div. Like visible class or something else (Btw adding id to div which repeats is not a good idea. Your scripts will fail and will work for only first item, usually. You need to use class instead of 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>

Scroll method taken from & tested: https://stackoverflow.com/a/31264162/2259466

Notes: Transition not worked as expected in my code. You need to use display none too but you can't use animation with it (You can actually, but need workaround). Or you can just use animations in js, harder way.

So in general code needs to look like it. I know it's not completed but I hope it gives you the idea of it.

Good advice with ID's and thanks for the answer. I've checked this but there are problems with transitions as you've mentioned. Right now, I'm using the jquery lazy-load plugin. It focuses only lazy-loading the photos with an approach of using the same placeholder for images and replacing them with their data-original attribute as you scroll. Any ideas on how that would work with something similar to you've posted? — cinnaroll45, Nov 16 '16 at 18:40

Basic infinite scrolling/lazy loading blog posts with pure JavaScript

1 Answers1

Linked