How to lazy load images

Рет қаралды 109,852

Күн бұрын

Continuing my dive into the Intersection Observer API, this week I look at probably the most practical use case for them, lazy loading images! It's relatively easy to do, and we can use the intersection observer's rootMargin to make sure the image loads before it enters the screen.
Other videos in this series:
Introduction to Intersection Observer: • Introduction to the In...
Change navbar style on scroll: • How to change your nav...
Slide in and fade in on scroll: • Fade and scroll items ...
Great article that goes into a lot of detail on Intersection Observers: www.smashingmagazine.com/2018...
#javascript #lazyload
---
Come and hangout, ask questions, suggest ideas, and meet some awesome people over in The Community: / discord
I have a newsletter! www.kevinpowell.co/newsletter
New to Sass, or want to step up your game with it? I've got a course just for you: www.kevinpowell.co/learn-sass
---
My Code Editor: VS Code - code.visualstudio.com/
How my browser refreshes when I save: • How to automatically r...
---
Support me on Patreon: / kevinpowell
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZfaq channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell

Пікірлер: 106

@natobrittonfutbolfun4328 2 жыл бұрын

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.

@swapnanilgupta3046 5 жыл бұрын

Loving your JavaScript tutorials. Please try to make more of them in the future ❤

@boyananakiev4896 4 жыл бұрын

Kevin, you're an absolute boss! YOUR TUTORIALS ARE AMAZING.

@Steveeland 5 жыл бұрын

I skipped the Intersection Observer videos, until now! This is a really useful case!

@julianvazquez1435 4 жыл бұрын

Your channel is a gem. Keep it up!

@ibknl1986 3 жыл бұрын

Your teaching is a blessing.

@el_tjonte3547 Жыл бұрын

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

@digitalservices118 4 жыл бұрын

Loving your JavaScript tutorials.

@ChrisFredriksson 5 жыл бұрын

Thank you Kevin! So helpful and so easy, certainly going to try this out on one of my sites, this weekend!

@greglumley8249 3 жыл бұрын

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

@zonsubba3654 Жыл бұрын

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

@technophile7024 5 жыл бұрын

Awesome tutorials! Great explained! Thanks for such a nice video!

@awaiskamran8448 2 жыл бұрын

Thanks Kevin, this was really helpful

@underbedmonstersmusic 5 жыл бұрын

Great video! A good pratice for lazy loading images is to set a lightweight placeholder image to all the src attributes, so there wont be gaps while the images are not yet loaded.

@hasmuddinansari5411 Жыл бұрын

Yyyuuyyyyuuy'nvyynuyyuhyyyjyugikkiynh तर रह्ययीयyi

@sarabb2056 4 жыл бұрын

You provide really good instructions, thank you!

@hugocsl 4 жыл бұрын

Yo Kevin, this is gold man! Thx for sharing 💪👊 Sometimes I keep thinking about to translate some of your content into Portuguese. Here in Brazil we have few access to quality content in Portuguese

@tegaogheneovo5881 2 жыл бұрын

Do it then reference his channel. NIKE

@phillaelony3035 3 жыл бұрын

Thank you so much for this amazing video!

@davidaragon7741 4 жыл бұрын

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

@ruslankh9004 3 жыл бұрын

Thanks a lot! Great video!

@Adrian-jq1of 4 жыл бұрын

I wish I had a teacher like you in my school.

@shgysk8zer0 3 жыл бұрын

I'm working on a similar technique. The primary difference is that I'm adding images (any content, really) inside of a and 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.

@lucianchevvy97 2 жыл бұрын

Great vid!

@mamadkhan6708 3 жыл бұрын

Thank you and Thank you very much . I was looking to do the same thing like you.

@brian554xx 4 жыл бұрын

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

@pratikmore3122 2 жыл бұрын

Awesome 👍

@LanFeusT23 5 жыл бұрын

Very cool!

@karamveersachdeva935 3 жыл бұрын

Awesome sir

@Limonische 5 жыл бұрын

Nice video, Kevin! This can be even more powerful in combination with requestIdleCallback to load images in portions when browser is idle.

@gabiold 4 жыл бұрын

It depends on the function of your page. If there are a lot of images, and the images are not part of the design but rather the content itself (gallery) the user might not interested and do not watch all (does not scroll all the way to the end, leaving the page), it may not worth loading it. Saves data traffic for the user and your server too.

@ifathere 2 жыл бұрын

absolutely cool intersection obeser

@CreativeJE 5 жыл бұрын

this is a very useful api i didnt know about it thanks a lot for these awesome videos

@thepixelproducer 5 жыл бұрын

Great video as always, very informative. Couple things though, removing the src attribute will throw errors when ran through the W3C validator. This could be fixed by adding src="#" to the image elements but I'm not sure if that would be a bad practice. Also, how would this work the picture element and srcset?

@rashikkarmacharya8023 4 жыл бұрын

Nice man!!

@SHAGGYDOG9111 4 жыл бұрын

Hi Kevin, Thanks for the helpful video! I am new to intersection observer and at 3:52 in your video, I was curious as to why you return the entry if it is false when intersecting. Looking forward to your response

@rickyu1978 4 жыл бұрын

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?

@KevinPowell 4 жыл бұрын

Yup, I'd probably use the native feature. Looks like it's on it's way for FF too, I believe it's in Nightly already.

@Mia_luvs_her_mom 2 жыл бұрын

thanks a lot

@utkarshkukreti239 3 жыл бұрын

Thank you Kevin Could you please explain more here in comment, the last use case at 10:00 mark where you were mentioning that if we have 5 images in a row followed by next row then some data-src...I was not able to grab that. Thank you in advance.

@NKardan 4 жыл бұрын

Thank you so much, it's so informative but I have one question: how can I use lazy load if I use background-image in CSS file to import images and other images in the HTML file?

@sabiruli 5 жыл бұрын

Thanks for awesome tutorials. How can I apply the Lazy load in background images?

@TheGolden90s 5 жыл бұрын

Using JavaScript you can target an element's style properties like "element.style.backgroundImage" and load the image that way. www.w3schools.com/jsref/prop_style_backgroundimage.asp

@martinquintero1159 3 жыл бұрын

Hi Kevin! Would this work for embed videos aswell?

@statusclinic 4 жыл бұрын

nice

@chefbennyj 5 жыл бұрын

Was the 'else' keyword nessessary in the observer for each function, after the return?

@KevinPowell 5 жыл бұрын

Nope, you could definitely do without it 👍

@connect2ramprakash 4 жыл бұрын

Your video is amazing Kevin. But when i try to do Intersection observable on a class of elements, everything has isIntersecting as true , why does this happen???

@jomoc6112 2 жыл бұрын

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

@FaisalMalik-fu5vn 2 жыл бұрын

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?

@BalachandranSumathiB 3 жыл бұрын

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?

@guersomfalcon7544 4 жыл бұрын

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

@galalistationery9434 4 жыл бұрын

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

@SunnyVakil 5 жыл бұрын

Hi Kevin, I have learned a lot of CSS from your videos on you tube, I just want to let you know that subgrid is official now. Can you make a 5 minute friday video and explain us in simple manner than It would be Helpful.

@KevinPowell 5 жыл бұрын

I'll be looking into it soon-ish. It's only in Firefox at the moment, but still I'm super excited :D

@rogercolque 3 жыл бұрын

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.

@bushigi5913 2 жыл бұрын

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!

@victorwillhuber 4 жыл бұрын

I have a question if you have time. I'm using 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 tag. i'm doing that because of SEO... google is telling me to use "images of last generation format"

@themrcaio123 4 жыл бұрын

i have the same problem

@brod515 5 жыл бұрын

You checked if !entry.isIntersecting; why does the intersectionObserver return objects that are not intersecting in the first place. shouldn't the intersection observer use its callback only when the object is not intersecting?

@KevinPowell 5 жыл бұрын

It needs to first check if something is intersecting or not to know in the first place. I'm sure there are clever use cases for when things aren't interesting as well! I'd rather have the extra info and be able to use it if the case comes up 😁

@Liocattechtips 5 жыл бұрын

Can you make a video for the explanation href="javascript:void(0)" Used with .it will be so nice if you do that for me.🥰

@the.real.ipatch 4 жыл бұрын

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.

@KevinPowell 4 жыл бұрын

I never uploaded this one to github, sorry :\

@the.real.ipatch 4 жыл бұрын

Kevin Powell its cool i found a decent google web developer doc that this subject in detail, even for using polyfills along people browsing with js disabled

@lindavanhoutum6223 4 жыл бұрын

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

@KevinPowell 4 жыл бұрын

You could definitely do it the same way, just make sure you don't unobserved and it'll check when it leaves the viewport as well.

@amadousow6598 4 жыл бұрын

thx can you do it in angular ?

@gearedcorp 4 жыл бұрын

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?

@davidaragon7741 4 жыл бұрын

Yes this depends on the threshold and root margin. If you don't mind me or anyone else takes a look at your code, upload it to github or any other platform and we may be able to help.

@hetoverseo3887 Жыл бұрын

Threshold 0, first pixel of the image that appears makes the image load. Threshold 1, entire image element has to appear on the window to be loaded.

@legostud 2 жыл бұрын

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

@alighoneim8042 3 жыл бұрын

from where to copy the code

@sachinnarula8059 4 жыл бұрын

This is not working in Safari browser

@SahilRajput03 2 жыл бұрын

Please post the code here for this ??

@SCU3A_S7EVE 5 жыл бұрын

Notification squad assemble!

@eluagoni 5 жыл бұрын

Is it accessible?

@KevinPowell 5 жыл бұрын

No reason it wouldn't be. You can still leave alt text, and the image will still be in the DOM at all times.

@angepicard7968 4 жыл бұрын

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

@pchound5962 3 жыл бұрын

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

@tobyflenderson7176 5 жыл бұрын

A comment.

@xreev0x 9 ай бұрын

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

@xreev0x 9 ай бұрын

I found that specifically “threshold: 1,” breaks it, but based on a previous video I don’t understand why. That just specifies when the whole part is on the screen, which is 1rem in height so way less than the viewport height.

@stratvids 4 жыл бұрын

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

@BaaicNotBike 4 жыл бұрын

He sound like Gus from Rooster Teeth

@vishalsundararajan1228 4 жыл бұрын

the image loading process is jaggy, it changes the alignment of the text and it irritates many people

@KevinPowell 4 жыл бұрын

That's why you want to load it in before it reaches the user, not only once it's in their view :) Also, if you start giving your images a width and a height property, browsers are starting to use that in smart ways to fix those types of issues of text and layout chagnes.

@ColinPittendrigh 2 жыл бұрын

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?

@rashedobeidat2612 3 жыл бұрын

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.

@marcin199919 5 жыл бұрын

BAN LAZY LOAD !

@Alessandro-nq3tm 5 жыл бұрын

Why? For users with js disabled?

@KevinPowell 5 жыл бұрын

Yes, why indeed? I realize some people disable JS, but overall it's a pretty solid practice

@AdrianCBlack 5 жыл бұрын

@@KevinPowell I think this was pretty solid practice 10 years ago. The term now reached the ears of my clients and they constantly ask for it without knowing actually what it is and within the context where they have like a handful of tiny images on the page. So when they say they want lazy loading 9 out of 10 times there's absolutely no need. So yes ... lazy loading big thumbs down. not to mention the fact that we have image tags without sources