Infinite Scrolling in Javascript made super easy…

I am here to talk a little about Javascript infinite scrolling feature, I know (for beginners like me) it seems quite a mouth full and hard to implement but I just went through a very easy and understandable way of getting the hold of infinite scrolling feature which I want to share with you guys. Also, to elaborate what infinite scrolling is, it is the feature where you load some pics on the website and when user reaches the end of the webpage then some more pics are loaded (like we see on Pinterest).

So, we will start off by creating a new project in VS Code (you can choose any IDE), create the usual three files index.html, style.css and app.js
Just to let you know I will be using the random Dog API (which is a free API) in order to generate some random dogs pics, the url is: https://dog.ceo/api/breeds/image/random

Now we will add the simple markup on the index.html file like this:

<div class="container">
</div>

We don’t need much in index.html and style.css since the main logic will go in the app.js file..Our style.css is also simple having the following styles:

.container{
    display: flex;
    flex-wrap: wrap;
}
img{
    margin:5px;
    width:200px;
    height:200px;
}

You can always add more styles to make the webpage look fancier.

Now we’ll start with the app.js file which is the backbone of this project.
First, we need to select our container from the html file because here we will be showing the images:

const container = document.querySelector('.container');

Then, we’ll define a function loadImages() giving it a default numImages parameter to 10 (to show 10 images):

function loadImages(numImages = 10){
   let i=0;
    while(i < numImages){
    fetch('https://dog.ceo/api/breeds/image/random')
    .then(response=>response.json())
    .then(data=>{
    const img =  document.createElement('img');
    img.src = `${data.message}`
    container.appendChild(img)
    })
    i++;
    }   
    }
loadImages();

Notice that we’ve used a while loop here to load 10 images at first and when 10 image elements have been created then we can check for the scroll event of the window whether we need to load more images or not.

To achieve this behavior, we will be making the use of three properties of the window:

window.scrollHeight => Indicates the height of the entire document
window.scrollY => Indicates how much the document has been scrolled from the top
window.innerHeight => Indicates the visible part of the window

The diagram below can illustrate these properties better:

Looking at the diagram above, we can workout a formula. If the sum of scrollY and innerHeight is greater or equal to the scrollHeight, it means we have reached the end of the document and we need to load more images:

window.addEventListener('scroll',()=>{
    console.log(window.scrollY) //scrolled from top
    console.log(window.innerHeight) //visible part of screen
    if(window.scrollY + window.innerHeight >= 
    document.documentElement.scrollHeight){
    loadImages();
    }
})

Here is the link of the complete GitHub repo for this project: https://github.com/NasreenKhalid/Infinite-Scroll-Javascript

Also, I would also like to mention this youtube tutorial (by The Code Creative) for this project which explains all the concepts very precisely and easily: https://www.youtube.com/watch?v=xHm6AbNwAw8