Lazy Load Images with Vanilla JavaScript and Intersection Observer

Website performance is crucial for user experience. If you leave the user looking at a blank screen for too long they will leave. In this video, learn how to lazy load images to improve your site performance and user experience. To do this, we'll use vanilla JavaScript and the Intersection Observer API.

_____________________________________________

Newsletter 🗞
Interested in exclusive content and discounts? 🤯 Sign up for the newsletter!
_____________________________________________

Connect with me 😀
_____________________________________________

COURSES 💻

[lis]

as a webscraper and a guy who hates when website misbehaves i found this "under the hood of LL" very educating, thanks!

[stillready]

Wow you explained it so good and really easy to understand. It took my many hours only to get it working on my own.

[obempa]

working on a photography site, I'm typically a backend engineer but this project is for the wife, hence I've had to do frontend design. My backend architecture to me is on point, the site sits on cloudfront cdn but was still having sloppy images load issues ...this video is a lifesaver...plus am using vanilla js

[louleg]

Great tutorial, thanks. Always on the lookout for vanilla options.

[nsharma]

This is exactly the video I've been looking for! Just yesterday I was wondering how can we emulate a slow internet connection and I got the answer for that too! Also learnt some cool keyboard shortcuts. Thanks for this really amazing and helpful video! 😄

[navinkumarsahu]

Now I'm repenting why the heck I didn't landed on this channel earlier

[nilamrakholiya]

Amazing video for Lazyloading, Thank you so much for this video.

[kasperkat]

Thank You for this excellent explanation . How can I integrate this into an Angular SPA? And how to use it for i frames and <video>?

[badcatdesign]

Love it! thanks. I add this to my img css so it looks like you're playing Minecraft while the images load.... :)
```
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
```

[outdateddnz]

What will I do if I don't have a url since I'm using php I check if for the image folder and just echo it with the file name

[style-it-up]

I know it’s being long, but how do I do same for images saved on my pc?😢

Any assistance?

[ozzyfromspace]

I’ll be right back, gotta go make a burger now 😂😂

[repotranstech]

Can I show a spinner instead of blurred image.

[kratikachowdhary]

This was awesome. Thank you for such a informational video.

[zcodings]

Hi james

If your image is being fetched from within your project how would you do the resizing of the quality of the image?

[SansPur]

Wow, this is really-really cool but is anyone else having the first several images remain blurry until scrolling them off screen and back to force an update?

[MaxProgramming]

Can you also make a video on the Network tab? I don't understand it properly

[milosleng]

nice bruh, so no need to use data attribute, lovely

[gavriel_adi]

Hi, first of all thank you very much for the guide and the code just works perfectly!!
But I have a question, do you think the browsers' scanners won't accidentally scan the wrong images?

[muhammedozalp]

Can you please tell me what those 2 icons like bird and diamond (extentions) are at the side bar ?