Lazy Loading Images

A lightweight browser demo that lazy-loads image assets only when they enter the viewport.

---

Overview

This project demonstrates image lazy loading with the native Intersection Observer API. Instead of loading every image as soon as the page opens, each image keeps its real URL inside data-src. When the image scrolls into view, JavaScript moves that URL into src, fades the image in, and stops observing it.

The result is a cleaner first load, smoother scrolling, and a simple pattern you can reuse in image-heavy pages.

Features

• Lazy-loads remote images as they become visible.
• Uses the browser-native IntersectionObserver API.
• Unobserves each image after loading to avoid extra work.
• Adds a small fade-and-slide animation when images appear.
• Includes smooth anchor navigation between image sections.
• Built with plain HTML, CSS, and JavaScript.

Tech Stack

Tool	Purpose
HTML5	Page structure and image placeholders
CSS3	Layout, transitions, and visual styling
JavaScript	Viewport detection and lazy-loading logic
Intersection Observer	Efficient scroll-based visibility tracking

Project Structure

Lazy-Loading-Images/
|-- index.html   # Image sections and navigation links
|-- style.css    # Page styling and image reveal animation
`-- script.js    # Intersection Observer lazy-loading logic

How It Works

<img data-src="https://example.com/image.jpg" alt="Preview image">

1. Images start without a src, so the browser does not request them immediately.
2. script.js observes every image on the page.
3. When an image reaches the visibility threshold, its data-src value is copied into src.
4. The .loaded class fades the image in.
5. The observer stops watching that image after it loads.

Run Locally

Clone the repository:

git clone https://github.com/pr0-gramm3r/Lazy-Loading-Images.git

Open the project folder:

cd Lazy-Loading-Images

Then open index.html in your browser.

No build tools, package installs, or frameworks are required.

Customization

To add your own images, create another section in index.html and place the image URL inside data-src:

<section id="Image12">
  <img data-src="https://example.com/your-image.jpg" alt="Custom image">
</section>

You can tune when images load by changing the observer threshold in script.js:

threshold: 0.8

Lower values load images earlier. Higher values wait until more of the image is visible.

Contributing

Contributions are welcome. A few good improvement ideas:

• Add descriptive alt text for every image.
• Add responsive image sizing for smaller screens.
• Add a placeholder or blur-up effect before each image loads.
• Replace remote demo images with local optimized assets.

License

This project does not currently include a license file. Add one before using or distributing the code in production.

---

Made with HTML, CSS, JavaScript, and a little viewport magic.