How to create an infinite scroll effect for images?

In today's world of web development, infinite scrolls are one of the common ways to enhance the user experience in displaying long and continuous content such as social media feeds. This technique allows users to view subsequent content without the need to reload the page, providing a seamless viewing experience. Among these, images are one of the elements that can be elegantly and smoothly rendered using infinite scroll.

Implementing an infinite scroll effect for images can be challenging, especially if you're looking to maintain performance quality and user experience. Various tools and libraries exist in JavaScript that can simplify this process. One such method uses the Intersection Observer API. This API allows you to detect when elements are about to come into view without the need for traditional scroll events, efficiently tracking elements close to user view.

To begin, create a simple HTML structure for your images. Then, utilize JavaScript and the mentioned API to identify the last loaded image and to load new images. Additionally, apply appropriate CSS styles for better visual presentation of images.

Here is a simple code sample to illustrate how to create such an effect:

<!-- HTML Structure -->
<div id="image-container">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <!-- More images -->
</div>

<!-- JavaScript Code -->
<script>
const imageContainer = document.getElementById('image-container');
let imageCounter = 3; // Starting from 3 as 1 and 2 are loaded initially

const loadImage = () => {
  for(let i = 0; i < 2; i++) {
    const img = document.createElement('img');
    img.src = `image${imageCounter}.jpg`;
    img.alt = `Image ${imageCounter}`;
    imageContainer.appendChild(img);
    imageCounter++;
  }
};

const observer = new IntersectionObserver((entries) => {
  if(entries[0].isIntersecting) {
    loadImage();
  }
});

observer.observe(document.querySelector('#image-container img:last-child'));
</script>

<!-- CSS Styles -->
<style>
  #image-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #image-container img {
    max-width: 100%;
    margin: 10px 0;
  }
</style>

Code Explanation: