Infinite Scroll With Photo Gallery in Vanilla Javascript

Infinite Scroll With Photo Gallery in Vanilla Javascript

Have you ever wondered why as you scroll down along the main page you can see more posts popping up? We are going to explain how that works with vanilla JavaScript, CSS and HTML. 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.

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:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="page.css" />
  </head>

  <body>
    <script src="page.js"></script>
    <div id="container"></div>
    <div class="loading">
      <div class="ball"></div>
      <div class="ball"></div>
      <div class="ball"></div>
      <div class="ball"></div>
    </div>
  </body>
</html>

javascript css html web-development developer

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire CSS Developer

Want to develop a website or re-design using CSS Development? We build a website and we implemented CSS successfully if you are planning to **[Hire CSS Developer](https://hourlydeveloper.io/hire-dedicated-css-developer/ "Hire CSS Developer")**...

How to add CSS & Javascript to your HTML

In this video, we create a starter template and link external CSS and Javascript files into our HTML file. We also look into what a CDN is and general boilerplate setup for a web development project.

Web Animations with HTML, CSS, and JavaScript

Learn about some basic animations you can do with CSS, HTML and JavaScript and shows you how to add input animations to your site. Web animation is necessary for creating eye-catching websites that enable better conversions and attract users to click, view, and buy things on your website.

Responsive Website with HTML, CSS, and JavaScript

We will build a Modern Responsive Website with HTML, CSS, and JavaScript. Responsive Website with HTML, CSS, and JavaScript - How to Build a website with HTML, CSS, and JS

HTML and CSS Tutorial for Beginners | HTML and CSS | HTML CSS Tutorial

HTML and CSS Tutorial for Beginners will provide you with a detailed and comprehensive knowledge about HTML. In this HTML Tutorial for Beginners you will learn HTML concepts from scratch and also how to create your first web page using HTML Tags.