How to lazy load images

Подписаться 920 тыс.

Просмотров 110 тыс.

50% 1

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 RU-vid channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell

Опубликовано:

30 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 106

@swapnanilgupta3046 5 лет назад

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

@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.

@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!

@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.

@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

@digitalservices118 4 года назад

Loving your JavaScript tutorials.

@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

@el_tjonte3547 Год назад

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

@ibknl1986 3 года назад

Your teaching is a blessing.

@technophile7024 5 лет назад

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

@zonsubba3654 Год назад

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

@davidaragon7741 4 года назад

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

@sarabb2056 4 года назад

You provide really good instructions, thank you!

@awaiskamran8448 2 года назад

Thanks Kevin, this was really helpful

@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.

@phillaelony3035 3 года назад

Thank you so much for this amazing video!

@Adrian-jq1of 4 года назад

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

@andreroxhage4003 4 года назад

Great video! Thanks!

@lucianchevvy97 2 года назад

Great vid!

@LanFeusT23 5 лет назад

Very cool!

@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.

@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?

@mamadkhan6708 3 года назад

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

@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

@brian554xx 4 года назад

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

@pratikmore3122 2 года назад

Awesome 👍

@karamveersachdeva935 3 года назад

Awesome sir

@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.

@CreativeJE 5 лет назад

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

@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?

@ifathere 2 года назад

absolutely cool intersection obeser

@Mia_luvs_her_mom 2 года назад

thanks a lot

@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

@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???

@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?

@statusclinic 4 года назад

nice

@martinquintero1159 3 года назад

Hi Kevin! Would this work for embed videos aswell?

@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?

@jomoc6112 2 года назад

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

@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 👍

@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.

@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

@galalistationery9434 4 года назад

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

@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

@guersomfalcon7544 4 года назад

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

@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 😁

@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!

@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.

@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.

@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.🥰

@legostud 2 года назад

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

@amadousow6598 4 года назад

thx can you do it in angular ?

@SCU3A_S7EVE 5 лет назад

Notification squad assemble!

@angepicard7968 4 года назад

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

@alighoneim8042 3 года назад

from where to copy the code

@tobyflenderson7176 5 лет назад

A comment.

@SahilRajput03 2 года назад

Please post the code here for this ??

@pchound5962 3 года назад

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

@sachinnarula8059 4 года назад

This is not working in Safari browser

@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.

@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.

@BaaicNotBike 4 года назад

He sound like Gus from Rooster Teeth

@stratvids 4 года назад

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

@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?

@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.

@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