How to lazy load images

You should at least use ts-check with vscode to spot those errors earlier ! :p

I have a question if you have time. I'm using <picture> to load .webp format when is supported and .jpg formato when is not (safari ¬¬)... how can I use this method for lazy load and still use <picture> tag. i'm doing that because of SEO... google is telling me to use "images of last generation format"

Great video! Thanks!

is there is a project repo on your github for this video, i looked through your repositories but didn't see one for this particular video.

He sound like Gus from Rooster Teeth

Nice man!!

Hi Kev, really like your intersection obs tutorials. As of Chrome 75, loading="lazy" became a thing.. how does that compare with lazy loading images using the intersection observer?

You provide really good instructions, thank you!

if(!something) return; else { dostuff } ?? you should be doing if(something) { dostuff }

thx can you do it in angular ?

Is there a way to unload the images again? So to remove the src attribute and add the data-src again?

bro I want to create an eCommerce website , how to host my image cdn website should you use cdn image or no....?

In what situation would it be useful to load the images like this?

nice

I like to be alone.
You are one of very few exceptions. Having you around feels comfortable.

I have been experimenting with the IntersectionObserver for a while because I would like to add lazyloading to my stores but I have been stumbling in one area which I can't figure out, that is rootMargins. I followed your tutorial exactly to see if I could reproduce your example on screen which I can largely except for the rootMargins.
The images load after coming fully into view on the screen (that is the threshold setting) but ignore the rootMargin value all together.
Can you or anyone else identify why that might be? Is it browser specific?

I've been following you for a while, first comment ever, this is absolutely awesome! More JS tutorials please!

Hey Kevin, thanks for putting these up. You teach really nicely.

Thanks a lot!, I tried the code. It is fantastic. Can you do a custom gallery like fancybox. Need something lighter. Also can u tell how to do a masonry left to right gallery?

Hi Kevin! Would this work for embed videos aswell?

Your teaching is a blessing.

Tutorials are accumulated on top of each other. not a very good option if you are here to only learn how to lazy load html images.

Thank you so much for this amazing video!

and here im wondering what happened to waypoints.js

Thanks a lot! Great video!

Awesome sir

Hi.
Nice video. and good technique lazy loading images on Scrolling





if my images GET from a fetch request Api json and all images shows in viewport in same time?.
i want like a placeholder for each image until the image is fully loaded.

I'm working on a similar technique. The primary difference is that I'm adding images (any content, really) inside of a <template> and <noscript> and doing `tmp.replaceWith(tmp.content)` on intersection.

I think this is the absolute optimal technique on what's currently available, with the possible exception of native lazy loading.

You don't have the exact link to the codepen code, only your user page.

from where to copy the code

thanks a lot

Thankfully, we don't have to do lazy loading this way... So troublesome. All we need to do is add "loading='lazy'" to the img tag we have, hooray!

@Kevin can i use this as it will load blur images first then loads the clear one on intersect

Thanks Kevin, this was really helpful

absolutely cool intersection obeser

There’s an easier approach now. Add the ‘loading’ attribute to the ‘img’ tag and set it equal to “lazy”

Does lazy loading mean it is now OK to make long pages with many images? Or at least extend conventional wisdom about page length and image number best practices?

Thank You Kevin! Your enthusiasm is very contagious... I love the way you showed us in the CSS applying it at 300px and -500px. You are very articulate too and I appreciate this since I am a new learner of JS and CSS.

Awesome 👍

Hey, Kevin great video! Can you please guide us on how to disable WordPress native lazy loading for the hero/featured image or largest contentful paint?

Great vid!

Please post the code here for this ??

You just knew what my site needed ...thank you✌

Awesome content. I really was needing this. Thanks Kevin.

This is the stupidest feature ever. It is horribly distracting to anyone searching on a webpage to have something flashing on the screen as you scroll.

Creating IntersectionObserver options never works for me. The observer never triggers. But simply not including options it works.