Image Lazy Loading Demo
Open Chrome DevTools → Network tab → Set throttling to "Slow 3G" to see skeleton loaders
Standard Images
About Us
Contact Us
Preview Image
Full Width Banner (Fill Mode)
Circular Images
Team Member 1
Team Member 2
Property Card Grid
Property 1
Premium real estate investment opportunity
₦5,000,000
Property 2
Premium real estate investment opportunity
₦5,000,000
Property 3
Premium real estate investment opportunity
₦5,000,000
Property 4
Premium real estate investment opportunity
₦5,000,000
How to Test
- Open Chrome DevTools (F12 or Cmd+Option+I)
- Go to the Network tab
- Change throttling from "No throttling" to "Slow 3G"
- Reload this page (Cmd+R or Ctrl+R)
- Watch the beautiful skeleton loaders animate while images load!
Component Location:
/src/components/common/ImageWithSkeleton.jsxDocumentation:
/IMAGE_LAZY_LOADING.md
