HTML · Performance

Advanced Lazy Loading

Master modern lazy loading techniques with Intersection Observer API for optimal performance

Find videos you like?

Save to resource drawer for future reference!

What is Advanced Lazy Loading?

Advanced lazy loading uses the Intersection Observer API to load content only when it's about to enter the viewport

While basic lazy loading with loading="lazy" is simple, advanced lazy loading gives you complete control over when and how content loads using JavaScript.

Basic Lazy Loading

✓ Simple attribute
✓ No JavaScript needed
✗ Limited control
✗ Browser-dependent

Advanced Lazy Loading

✓ Full control
✓ Custom loading logic
✓ Animations & effects
✓ Progressive loading

How Lazy Loading Works

Browser Viewport

✓ Visible - Loaded

Image Loaded

Loading Zone (100px margin)

Not Loaded Yet

Loaded

Loading Zone

Not Loaded

1. Basic Lazy Loading with Attribute

Simplest way to lazy load images using the loading attribute

Basic Lazy Loading

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Lazy Loading</title>
  </head>
  <body>
    <h1 style="text-align: center; color: #2563eb;">Image Gallery with Lazy Loading</h1>
    <div class="gallery">
      <img src="https://picsum.photos/300/200?random=1"
        alt="Image 1"
        loading="lazy"
        class="placeholder">
        <img src="https://picsum.photos/300/200?random=2"
          alt="Image 2"
          loading="lazy"
          class="placeholder">
          <img src="https://picsum.photos/300/200?random=3"
            alt="Image 3"
            loading="lazy"
            class="placeholder">
            <img src="https://picsum.photos/300/200?random=4"
              alt="Image 4"
              loading="lazy"
              class="placeholder">
            </div>
          </body>
        </html>

Live Preview

Loading preview...

Key Points:

• Use loading="lazy" attribute
• Add placeholder with loading animation
• Images load as you scroll down
• Browser handles everything automatically

2. Intersection Observer API

Full control with JavaScript - detect when elements enter the viewport

Intersection Observer Lazy Loading

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Intersection Observer Lazy Loading</title>
  </head>
  <body>
    <div class="container">
      <h1 style="text-align: center; color: #2563eb;">Scroll to Load Content</h1>
      <div class="card lazy-load" data-src="https://picsum.photos/800/200?random=1">
        <div class="skeleton"></div>
        <img alt="Lazy loaded image 1">
        <h2>Card 1</h2>
        <p>This content loads when you scroll to it!</p>
      </div>
      <div class="card lazy-load" data-src="https://picsum.photos/800/200?random=2">
        <div class="skeleton"></div>
        <img alt="Lazy loaded image 2">
        <h2>Card 2</h2>
        <p>Using Intersection Observer API for better performance.</p>
      </div>
      <div class="card lazy-load" data-src="https://picsum.photos/800/200?random=3">
        <div class="skeleton"></div>
        <img alt="Lazy loaded image 3">
        <h2>Card 3</h2>
        <p>Images load only when needed!</p>
      </div>
      <div class="card lazy-load" data-src="https://picsum.photos/800/200?random=4">
        <div class="skeleton"></div>
        <img alt="Lazy loaded image 4">
        <h2>Card 4</h2>
        <p>Save bandwidth and improve performance.</p>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

How It Works

Observer watches for elements entering viewport
When element is 10% visible (threshold: 0.1), it triggers
Images load and skeleton disappears
Smooth animations show content appearing

Intersection Observer Options:

threshold: 0.1 - Trigger when 10% visible

rootMargin: '50px' - Start loading 50px before visible

3. Progressive Image Loading

Beautiful blur-up effect - show low quality placeholder first, then full image

Progressive Lazy Loading

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Progressive Lazy Loading</title>
  </head>
  <body>
    <div class="container">
      <h1>✨ Progressive Image Loading</h1>
      <div class="grid">
        <div class="image-wrapper" data-src="https://picsum.photos/600/400?random=1">
          <img class="blur-placeholder"
            src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect fill='%23ddd' width='400' height='300'/%3E%3C/svg%3E"
            alt="placeholder">
            <img class="full-image" alt="Image 1">
            <div class="loading-badge">Loading...</div>
            <div class="image-label">Mountain View</div>
          </div>
          <div class="image-wrapper" data-src="https://picsum.photos/600/400?random=2">
            <img class="blur-placeholder"
              src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect fill='%23ddd' width='400' height='300'/%3E%3C/svg%3E"
              alt="placeholder">
              <img class="full-image" alt="Image 2">
              <div class="loading-badge">Loading...</div>
              <div class="image-label">Ocean Sunset</div>
            </div>
            <div class="image-wrapper" data-src="https://picsum.photos/600/400?random=3">
              <img class="blur-placeholder"
                src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect fill='%23ddd' width='400' height='300'/%3E%3C/svg%3E"
                alt="placeholder">
                <img class="full-image" alt="Image 3">
                <div class="loading-badge">Loading...</div>
                <div class="image-label">Forest Path</div>
              </div>
              <div class="image-wrapper" data-src="https://picsum.photos/600/400?random=4">
                <img class="blur-placeholder"
                  src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect fill='%23ddd' width='400' height='300'/%3E%3C/svg%3E"
                  alt="placeholder">
                  <img class="full-image" alt="Image 4">
                  <div class="loading-badge">Loading...</div>
                  <div class="image-label">City Lights</div>
                </div>
              </div>
            </div>
          </body>
        </html>

Live Preview

Loading preview...

Progressive Loading Steps:

Show blurred placeholder instantly

Display "Loading..." badge

Load full resolution image in background

Smooth fade transition to full image

Best Practices

Do This

✓Always provide width and height to prevent layout shift
✓Show loading placeholders for better UX
✓Use rootMargin to start loading before visible
✓Test on slow connections (throttle in DevTools)
✓Clean up observers when done

Avoid This

✗Lazy loading images above the fold
✗Not providing alt text for images
✗Observing too many elements at once
✗Forgetting to unobserve after loading
✗Using without fallback for older browsers

Browser Support

Intersection Observer API is supported in all modern browsers (Chrome 51+, Firefox 55+, Safari 12.1+, Edge 15+). For older browsers, use a polyfill.

Previous Topic

Declarative Shadow DOM

Server-side rendering of Shadow DOM with <template shadowrootmode>.

Next Topic

Container Queries

Responsive design based on container size (CSS Container Queries).

Ask a Question

Have a question about Advanced Lazy Loading? Ask our AI assistant.

🔐 Login to use AI Assistant

HTML Code Editor

Write and experiment with HTML code.

Output

Click "Run Code" to see the output.

Execution is only supported for Java, Spring, and JavaScript.

HTML · Performance

Advanced Lazy Loading

Master modern lazy loading techniques with Intersection Observer API for optimal performance

Find videos you like?

Save to resource drawer for future reference!

What is Advanced Lazy Loading?

Advanced lazy loading uses the Intersection Observer API to load content only when it's about to enter the viewport

While basic lazy loading with loading="lazy" is simple, advanced lazy loading gives you complete control over when and how content loads using JavaScript.

Basic Lazy Loading

✓ Simple attribute
✓ No JavaScript needed
✗ Limited control
✗ Browser-dependent

Advanced Lazy Loading

✓ Full control
✓ Custom loading logic
✓ Animations & effects
✓ Progressive loading

How Lazy Loading Works

Browser Viewport

✓ Visible - Loaded

Image Loaded

Loading Zone (100px margin)

Not Loaded Yet

Loaded

Loading Zone

Not Loaded

1. Basic Lazy Loading with Attribute

Simplest way to lazy load images using the loading attribute

Basic Lazy Loading

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Lazy Loading</title>
  </head>
  <body>
    <h1 style="text-align: center; color: #2563eb;">Image Gallery with Lazy Loading</h1>
    <div class="gallery">
      <img src="https://picsum.photos/300/200?random=1"
        alt="Image 1"
        loading="lazy"
        class="placeholder">
        <img src="https://picsum.photos/300/200?random=2"
          alt="Image 2"
          loading="lazy"
          class="placeholder">
          <img src="https://picsum.photos/300/200?random=3"
            alt="Image 3"
            loading="lazy"
            class="placeholder">
            <img src="https://picsum.photos/300/200?random=4"
              alt="Image 4"
              loading="lazy"
              class="placeholder">
            </div>
          </body>
        </html>

Live Preview

Loading preview...

Key Points:

• Use loading="lazy" attribute
• Add placeholder with loading animation
• Images load as you scroll down
• Browser handles everything automatically

2. Intersection Observer API

Full control with JavaScript - detect when elements enter the viewport

Intersection Observer Lazy Loading

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Intersection Observer Lazy Loading</title>
  </head>
  <body>
    <div class="container">
      <h1 style="text-align: center; color: #2563eb;">Scroll to Load Content</h1>
      <div class="card lazy-load" data-src="https://picsum.photos/800/200?random=1">
        <div class="skeleton"></div>
        <img alt="Lazy loaded image 1">
        <h2>Card 1</h2>
        <p>This content loads when you scroll to it!</p>
      </div>
      <div class="card lazy-load" data-src="https://picsum.photos/800/200?random=2">
        <div class="skeleton"></div>
        <img alt="Lazy loaded image 2">
        <h2>Card 2</h2>
        <p>Using Intersection Observer API for better performance.</p>
      </div>
      <div class="card lazy-load" data-src="https://picsum.photos/800/200?random=3">
        <div class="skeleton"></div>
        <img alt="Lazy loaded image 3">
        <h2>Card 3</h2>
        <p>Images load only when needed!</p>
      </div>
      <div class="card lazy-load" data-src="https://picsum.photos/800/200?random=4">
        <div class="skeleton"></div>
        <img alt="Lazy loaded image 4">
        <h2>Card 4</h2>
        <p>Save bandwidth and improve performance.</p>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

How It Works

Observer watches for elements entering viewport
When element is 10% visible (threshold: 0.1), it triggers
Images load and skeleton disappears
Smooth animations show content appearing

Intersection Observer Options:

threshold: 0.1 - Trigger when 10% visible

rootMargin: '50px' - Start loading 50px before visible

3. Progressive Image Loading

Beautiful blur-up effect - show low quality placeholder first, then full image

Progressive Lazy Loading

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Progressive Lazy Loading</title>
  </head>
  <body>
    <div class="container">
      <h1>✨ Progressive Image Loading</h1>
      <div class="grid">
        <div class="image-wrapper" data-src="https://picsum.photos/600/400?random=1">
          <img class="blur-placeholder"
            src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect fill='%23ddd' width='400' height='300'/%3E%3C/svg%3E"
            alt="placeholder">
            <img class="full-image" alt="Image 1">
            <div class="loading-badge">Loading...</div>
            <div class="image-label">Mountain View</div>
          </div>
          <div class="image-wrapper" data-src="https://picsum.photos/600/400?random=2">
            <img class="blur-placeholder"
              src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect fill='%23ddd' width='400' height='300'/%3E%3C/svg%3E"
              alt="placeholder">
              <img class="full-image" alt="Image 2">
              <div class="loading-badge">Loading...</div>
              <div class="image-label">Ocean Sunset</div>
            </div>
            <div class="image-wrapper" data-src="https://picsum.photos/600/400?random=3">
              <img class="blur-placeholder"
                src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect fill='%23ddd' width='400' height='300'/%3E%3C/svg%3E"
                alt="placeholder">
                <img class="full-image" alt="Image 3">
                <div class="loading-badge">Loading...</div>
                <div class="image-label">Forest Path</div>
              </div>
              <div class="image-wrapper" data-src="https://picsum.photos/600/400?random=4">
                <img class="blur-placeholder"
                  src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect fill='%23ddd' width='400' height='300'/%3E%3C/svg%3E"
                  alt="placeholder">
                  <img class="full-image" alt="Image 4">
                  <div class="loading-badge">Loading...</div>
                  <div class="image-label">City Lights</div>
                </div>
              </div>
            </div>
          </body>
        </html>

Live Preview

Loading preview...

Progressive Loading Steps:

Show blurred placeholder instantly

Display "Loading..." badge

Load full resolution image in background

Smooth fade transition to full image

Best Practices

Do This

✓Always provide width and height to prevent layout shift
✓Show loading placeholders for better UX
✓Use rootMargin to start loading before visible
✓Test on slow connections (throttle in DevTools)
✓Clean up observers when done

Avoid This

✗Lazy loading images above the fold
✗Not providing alt text for images
✗Observing too many elements at once
✗Forgetting to unobserve after loading
✗Using without fallback for older browsers

Browser Support

Intersection Observer API is supported in all modern browsers (Chrome 51+, Firefox 55+, Safari 12.1+, Edge 15+). For older browsers, use a polyfill.

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Declarative Shadow DOM

Container Queries

HTML Code Editor

Building Your Learning Module...

Advanced Lazy Loading

Basic Lazy Loading

Advanced Lazy Loading

Basic Lazy Loading

Key Points:

Intersection Observer Lazy Loading

How It Works

Intersection Observer Options:

Progressive Lazy Loading

Progressive Loading Steps:

Do This

Avoid This

Browser Support

Declarative Shadow DOM

Container Queries

HTML Code Editor

Advanced Lazy Loading

Basic Lazy Loading

Advanced Lazy Loading

Basic Lazy Loading

Key Points:

Intersection Observer Lazy Loading

How It Works

Intersection Observer Options:

Progressive Lazy Loading

Progressive Loading Steps:

Do This

Avoid This

Browser Support