Skip to main content

Lazy Loading Test Page

This page demonstrates lazy loading of images, iframes, and other media. Scroll down to see content load as it comes into view.

How to Test:
  1. Open browser DevTools → Network tab
  2. Filter by Images/Media
  3. Scroll down slowly to see images load dynamically
  4. Images should only load when they're about to enter the viewport

1. Above the Fold Image (Lazy Loading Starts Immediately)

This image is visible on page load, so it should start loading immediately:

Immediately loaded image

Scroll down to trigger lazy loading...

2. Standard Lazy Loading (data-src)

These images use data-src attribute and will load when scrolled into view:

Lazy loaded image 1

Image #1 - Loads when visible

Lazy loaded image 2

Image #2 - Loads when visible

3. Responsive Images with srcset

These images use data-srcset for responsive loading:

Responsive lazy loaded image

4. Picture Element with Art Direction

Picture element with different sources for different screen sizes:

Art directed image

5. Background Images

These divs use data-lazy-bg for background images:

Background Image 1
Background Image 2
Background Image 3

6. Lazy Loaded Classes

These elements get classes added when they come into view:

Fade In Left

This box will fade in from the left when visible

Fade In Up

This box will fade in from below when visible

Fade In Right

This box will fade in from the right when visible

Dynamic Styling

This box will get Bootstrap primary background and white text when visible

7. Lazy Loaded Iframes

YouTube videos and other iframes that load on scroll:

8. Image Gallery

A grid of many images to test performance with multiple lazy-loaded elements:

Gallery image 9
Image #9
Gallery image 10
Image #10
Gallery image 11
Image #11
Gallery image 12
Image #12
Gallery image 13
Image #13
Gallery image 14
Image #14
Gallery image 15
Image #15
Gallery image 16
Image #16
Gallery image 17
Image #17
Gallery image 18
Image #18
Gallery image 19
Image #19
Gallery image 20
Image #20

9. Lazy Loaded Video

HTML5 video that loads when scrolled into view:

10. Slow Loading Test (Loading Animation Demo)

These images from picsum.photos load slowly, so you can see the loading animation:

Slow loading image 1

Watch the shimmer loading animation

Slow loading image 2

This should show loading state longer

Slow loading image 3
Slow loading image 4
Slow loading image 5

11. Error Handling Test

These images have invalid URLs to test error handling:

This should show error state

This image should fail to load

This should load successfully

This image should load successfully

12. Final Image at Bottom

This image is at the very bottom of the page:

Final lazy loaded image
🎉 You've reached the end!

All lazy-loaded content should now be visible.

12. Dynamic Content Test

Click the button below to dynamically add new lazy-loaded images to test MutationObserver: