Image Lazy Loading

Objective: Implement a lazy loading mechanism for images, so they load only when they are about to enter the user's viewport, improving performance and reducing unnecessary network requests.

Instructions:

1. Build simple scrollable page with any images.
2. Create a function or component that handles the lazy loading of images.
3. The images should only load when they are about to enter the viewport.
4. Ensure that the mechanism works across multiple images on the page.

Requirements:

• The images should not load until they are close to appearing in the viewport.
• Use a placeholder or a loading indicator until the image has fully loaded.
• The lazy loading should work for multiple images on a single page.

Hints:

1. Use the Intersection Observer API to detect when the images are about to enter the viewport.
2. Replace the placeholder with the actual image URL when the image is about to load.