Infinite Scroll With Photo Gallery in Vanilla Javascript
Like most people in the world, you probably have a facebook account.
Have you ever wondered why as you scroll down along the main page you can see more posts popping up?
Today we are going to explain how that works with vanilla javascript, css and html.
To understand how all of these works let’s first understand how the whole application will be built all together. There are three components to this:
- html that contains the images and a loading indicator
- a css file that controls the animation of loading indicator and how big the images are
- a javascript file that contains the logic to get images, the logic to detect when the user scrolls to the bottom of the page, as well as a timeout logic to give time to load new images when user scroll down to get more images.
Let’s take a look at the following html file:
Over here, we have a container, which doesn’t contain any images at the moment. As to how the images are retrieved that will be explained once I show how the javascript logic is written.
The second part to this is loading part. The animation of the loading indicator will be controlled by the css file. This loading indicator is hidden by default but a css rule will be available to show the loading indicator. When user scrolls to the bottom of the page, an event listener will add the show class to the loading div to show the loading indicator.
Now let’s take a look at the css part:
Okay, this is a lot to absorb so let me take it down piece by piece.
Let’s take a look at the loading css rule. Notice there is an opacity of 0; this hides the loading indicator form the screen. We also have an additional rule, which is .loading.show. This will only apply when the div that contains a class of loading also contains a class of show. The show class will be added in the javascript file when user scrolls to the bottom of the page.
To make it obvious here is how it would look like behind the scene in html when the loading indicator:
<div class=”loading show”/>
I will talk about how the show class gets removed once we are moving onto the javascript file. What matters more is with .loading.show it will display the loading indicator with an opacity of 1.
Let’s take a look at the .ball css property:
Over here, we have a display: block, which generates space above and below the loading indicator. It also reserves the whole row specifically for the loading indicator itself. I also set animation-duration property, which dictates how long the animation of the loading indicator will run for.
The animation-timing-function dictates how the animation will progress(such as sliding slowly, sliding one step at a time, sliding slowly but repeating the sliding).
This screenshot won’t show the animation but should show a glimpse of how it looks like:
In our case, we let the loading circles(part of the loading indicator) slide but repeating in an infinite period, hence the animation-iteration-count property set to infinite. This determines how frequent the animation happens.
Let’s take a closer look at a few more css rules with balls:
Let’s take a look at what @keyframes mean.
@keyframes specifies an animation code. It has two values, a from and a to value. This specifies the animation effect that will take place initially gradually changed to something else.
For example, with the reveal property, we initially have an animation of scaling the circle to very small and scale up as it slowly reveals itself.
With sliding, we are only describing what its animation will be, which is sliding horizontally for 1em.
Let’s take a look at the css for every ball div. All these balls represents the dots that shape the loading indicator. With the first two ball divs, we want to reveal the loading indicator slowly and then scaling it up, displaying a loading animation. With the 3rd ball div, we simply want to slide to the right and with the 4th ball div, we reveal the loading dot and then reversing the animation(via animation-direction property).
A lot to digest, right? The css does a lot of the fancy animation effect with the loading indicator. Let’s stay away from the css logic and look at how the javascript logic handles things behind the scene:
There are few components to this. One is the function to get the images and another is the event listener for scrolling, which dictates when to display the loading indicator and getting new images.
Let’s take a look at the getImages function. Over here, we make an api call to get photos, with page and limit as url parameters. The page specifies which page from the url we are getting the photos from and this page gets incremented every time this function is called, rendering different pictures every time.
Once the api returns img information, we create 4 different img elements, attaching the url that points to the actual image as a src attribute. Afterward, we add each of these img element to the container. Since we just loaded new images, we can also remove the show class from the container div, effectively hiding the loading indicator.
We have another function called showLoading. We look for the loading indicator div and add the show class to it. The css logic will change the loading indicator opacity to 1 when the show class is a part of the loading indicator div.
Last but not least, we call window.addEventListener to the scrolling functionality. Over here, we try to access the scroll height and the client height from the root document, which is essentially the root node of the html page.
Well then, what is scrollTop, scrollHeight or clientHeight?
Let’s take a look at the following image:
When we have a page full of posts that will take multiple scrolls to see, we have a clientHeight, which is what we see at the moment. We have a scrollTop, which is the height of all the contents above the current posts we are seeing at the moment. We also have the scrollHeight, which is the height of all the contents in the actual page, seen or unseen. Here, we check if clientHeight + scrollTop ≥ scrollHeight -5, we will retrieve more images.
What does that mean? It means when clientHeight + scrollTop is almost equal or greater than scrollHeight, we are running out of contents to scroll down on. That’s when we know we can retrieve more photos, as a part of the requirement to get the infinite photo gallery in place.
So we have covered all the parts so far but why does this matter?
First of all, infinite scroll is pretty common in a lot of the platforms today such as twitters and facebook. If you are going for a frontend developer interview, there is a good chance they will ask you this question.
Secondly, this will help you get a better understanding of how css animations work and understand how the api calls are triggered on initialization and so on.
That’s it! Try implementing this yourself and see how it goes! If you want to see how this is implemented in react, you can also read the following article:
https://kaleongtong282.medium.com/infinite-scroll-with-photo-gallery-in-react-c7219b8be2a0
Happy coding.
