DEV Community

Cover image for Lazy Loading in images with React JS 😴

Lazy Loading in images with React JS 😴

Franklin Martinez on October 21, 2022

Lazy Loading is very important nowadays to improve the performance of your website. Performing image optimization helps your website to be faster, ...
Collapse
 
koire profile image
Koire • Edited

I have to say, it's so nice that "lazy" finally is an attribute.
Using the intersect API to judge when to load an image was so hard in the past.
Thanks for sharing "new" knowledge when you discovered it!

edit--
I meant new for you and others, not that it's not good/bad, just new for people

Collapse
 
robole profile image
Rob OLeary • Edited

Be careful not to lazy load images above the fold (on initial screen), this will have a negative impact on page loading times.

Collapse
 
franklin030601 profile image
Franklin Martinez

Thanks for the tip, by the way, how would you avoid loading images above the fold? πŸ€”

Collapse
 
robole profile image
Rob OLeary • Edited

Don't automate blindly by adding lazy loading to every image. When you are writing your HTML, don't make hero images lazy loading candidates!

If you want you want a smart way to automate it completely, then that is tricky. You only know if something is above the fold when the styles are computed.

Collapse
 
flash010603 profile image
Usuario163

I really liked this article, really useful, thanks for sharing.

Collapse
 
prom_ayush profile image
Ayush Porwal • Edited

Hi, the placeholderSrc, placeholder, effect properties didn't seem to work for me. I was trying this article on stackblitz: (Blur might be working but the other two surely arent)

Collapse
 
franklin030601 profile image
Franklin Martinez

the placeholderSrc property is a string, but it must be a URL of some other image

Collapse
 
joserocha profile image
jose-rocha

Tks, congrulations from post!

Collapse
 
wilmela profile image
Wilmela

Good job.

Collapse
 
onfuns profile image
onfuns

Good

Collapse
 
aradwan20 profile image
Ahmed Radwan

Great article, good job

Collapse
 
pahund profile image
Patrick Hund

Great article! πŸ‘πŸ»