Lazy-Loaded Images - Code This, Not That

Code this 💪, not that 💩. Learn how to use IntersectionObserver to lazy-load images efficiently in the browser without listening to the scroll event fireship.io/snippets/intersec...
API developer.mozilla.org/en-US/d...

[@gerritweiermann79]

Thanks for the new thing that will be stored in my head somewhere :D I really like the Code This Not That series. Please continue doing this!

[@ArabianAK]

Found your channel recently and I love it! Keep on keeping on.

[@SprHero]

I didn't know this existed. Thanks for the clear and to the point video! Looking forward to your next one 😉

[@Fireship]

Nice, it's one of my favs :)

[@LOOTS243]

@@Fireship easy thread gains 💪💪

[@islamibrahim8121]

Me too haha. I just watched the react one and this popped up. Quite the Gem too. I always avoided these flashy browser API because of support. Guess I'll be having fun with the observer and the polyfill

[@ImperiumLibertas]

Absolutely outstanding quality. Thanks again Jeff!

[@solifuse8079]

Brilliant! I really needed this guide, really helped make my code become more efficient; in fact, this whole series "Code This Not That" is amazing!

[@chriswindsor1417]

Great video! Love this kind of content. You explain everything so effectively and timely.

[@nicholassaephanh4407]

Dude I haven't touched code in a while and you make me hyped up to code lol. This is SO good.

[@isaacdiaby]

Fire ship🔥 actually love your videos, it gets to the point and just teaches you what you need to know. I needed this for my app, huge thanks man

[@Fireship]

Great to hear, thanks for watching!

Absolutely love all of our videos Jeff! Thanks for your hard work and thanks for being amazing.

[@Fireship]

Thank you Kevin :)

[@salmanwap]

This is first time I am watching your video. And within 10 seconds I subscribed to your channel. I am coding that for a long time, now I am starting to code this not that. Thanks for the video.

[@FinlayDaG33k]

This is a really nice thing that I did not consider myself yet. I've opened a ticket/issue on my own website repo so I'll have a look at it later again when the time is right. Keep up the good work!

[@akashrajpurohit97]

I like this 'Code this, Not that' section alot.. keep em coming🙌

[@kangqian8288]

Always love your channel on angular typescript :)

[@freeeedl]

Thx for all your stuff. I like your style and also listen to your voice ^^

[@Blagel97]

Really thorough walkthrough! Love your vids man

[@belahcenebenzaratahar5708]

Thank you for not wasting my time! short and yet covering it all.

[@themindstorm9947]

Thanks for all these tutorials!

[@markopantovic1865]

This video is amazing mate! Thank you for this quality content. Keep it up!

[@zeeshanmh215]

Very clear and concise tutorial. Waiting for more like this 😍

[@SamuelCamargo1000]

Thanks for this subject. Added a lot to my dev repository knowledge.

[@SurendraSinghChhabra]

Really short and simple video. Thanks !!

[@RahulSingh-rr9hx]

Thanks dude, for not making 20000000000mins long video with unnecessary explanation. Thanks for keeping it Lit 🔥🔥

[@srukshan98]

This is awesome! Didn't know that it is that easy... Thank you for this amazing video

[@mastercode7851]

you are amazing , i would love a full project from you hopefully

[@PaurakhSharma]

Thank you for these amazing videos.

[@didimedina4858]

Wow this is great! Going to spend sometime tinkering with this and animejs this upcoming weekend :)

[@jijinp1612]

Short and Useful stuff. Thank A lot

[@naga2054]

Thanks Jeff as usual great video. My expectation from you is always #LearnWhatYouDontKnow 😍

[@pb1431985]

Quick demo and useful information that can be implemented in any real life project

[@adriandinca5682]

Thank so much for mentioning that quicklink library

[@saadabbasi2063]

I appreciate that you changed your videos thumbnail, seems like everybody started using similar to what you had previously. 😃

[@Fireship]

I know, I see that design everywhere now. This design is harder to copy :)

[@danielsimionescu298]

Thank you so much! Exactly what I was looking for 😄

[@polinistinga1]

Awesome work!

[@The-Average-Gamer]

Awesome topic, please do more

[@nasrmgk]

Awesome channel with useful informations

[@ashwinshenoy6360]

Your firebase related stuff is really good.

[@ezeeok]

Love this series!

[@johnjoseph8294]

Once again great tutorial. Hat off to you men!

[@SoundFilmDesign]

Awesome video.. and awesome shirt!

[@zidalo]

Great video! I want that t-shirt!

[@scottmccartney1518]

Great video, been looking to implement Angular Material's scrolling soon!

[@balajkhan9894]

Love your content to the point 👍

[@firaskudsy]

U keep posting amazing videos.. 🙌

[@jensbienias1157]

This is so helpful. Thanks a lot!

[@vysanthskurup4374]

Excellent explanation 👍

[@idlevandal69]

This is a game changer.. I usually avoid scrolling animations, not anymore!!!

[@giancarlosisasi4137]

Awesome video, thanks a lot!

[@AungBaw]

Super crisp quality 🔥 fireship shirt yes!

[@anawhite2562]

Jeez, I think this is literally the first time I had to set speed at 0.75. Usually, I watch at 1.5 - 2. Still, thanks. Subscribed

[@Fireship]

Welcome to the channel!

[@amirfawzy1147]

first time to know that there's something called IntersectionObserver in javascript ... very good tip and efficient

[@chellappanv2281]

Thanks for the great video!!!

[@divinedela9125]

Tnx Jeff.. great video as always

[@nickstrands]

This is so useful to me right now !

[@MyIvanch]

I love your content !

[@satajyotidhawa4937]

Awsome video.its helps me to learn this new thing

[@misopetrik]

Great video!

[@vellendev]

Great video thank you sir!

[@elliotheath5366]

Good stuff, Jeff!

[@karsongrady]

Thank you! Great video. I like the vanilla javascript videos

[@Fireship]

Thank you, I'll be making one of these every couple weeks.

[@dwscheng]

Great content!!!

[@FauzulChowdhury]

Hi Jeff, I have learnt so much from you and about angular and firebase. I was hoping if you could find your time to make a video on angular search engine crawlabilty and server side rendering technique? This would really boost my confidence. Thank you.

[@just0for0adult]

Thanks for the knowledge shared

[@ZachInSpace]

Love it, thank you!

[@ssikarim]

The video was very useful for me. thanks

[@Shashank.Shinde]

I learned a lot firebase stuff from you

[@sivuyilemagutywa5286]

I don't know why I always press like before even watching your videos. Is it because your videos are short and straight to the point --> Yes Or clear and Clean --> Yes Or no unnecessary boilerplate --> Yes Or your content is unmatched --> Yes I guess I will never know

[@giangonzaga4900]

Wonderful thumbnail!

[@natanfourie]

Nice to know this trick 🙂👌

[@sourishdutta9600]

This one is amazing!! Thanks man!! Can you please make one video that how we can preserve the scroll position of a page. Like in medium app it redirects us to that perticular position where we stop reading one article and very smooth transition was there how to achieve this in js and angular. Thanks a lot. You are awesome. Will be waiting for more.

[@elmotareal]

Damn! Man! This was a "mic drop" quality video :)

[@BytesAndBrackets]

Amazing.. never knew it before

[@lj004]

Thanks as always!

[@25isfunnierthan24]

Wow that's awesome! Didn't know that even existed

[@thepotatokitty]

I was browsing through KZbin for some angular tutorials, found you... Best channel for the angular and firebase tutorial, coz ur video contains quality content not 💩 :-P

[@joedyer1989]

Awesome tut! I just wondered what the difference between/what's best to use - the unobserve or the disconnect method?

[@amritgupta1792]

You guys are awesome

[@mendisterenfeld2668]

Great video.

[@lutaseb]

did implement infinite scroll using the magical exaustMap() operator of rxjs, it worked like a charm, but did not have any images needing lazy loading or stuff. Thanks for your videos which just the best on youtube

[@mateja176]

Such an outstanding ambassador of JavaScript 👑

[@divanvanbiljon7603]

Awesome shirt!

[@devangrojasara9080]

Awesome Videos

[@harshitjoshi3082]

The t shirt looks good !

[@antlemec]

finally understood what lazy loading is ...

[@rithinprakash5045]

Always sharp

[@grAPPfruitMacroCraft]

Cool Video!

[@bibibobs]

Yo, that tshirt is 🔥

[@MercyFromOverwatch2]

Jeff is my favourite tech youtuber!

[@monsieurBoutte]

Beautiful

[@solderon]

it 'll be great if you try to explain more each transition part in the video (not talking about thus one) btw you're my preferred angular channel on KZbin. and don't forget to send me da t-shirt :p

[@boradmay]

Very helpful. Just know this api.

[@felixdorrschuck910]

Thanks alot!

[@hectorr.cobian1020]

Damn boi, thanks for the video

[@r4t40]

Nice job

[@julianvogel499]

Great Tutorial, learned a lot thanks=) But what about Background images? Is it possible to do it the same way with url? I mean, if I'm using a div for example and the Background Image is as an style element in it.... would that work?

[@JefersonLimaAlmeida]

Thank you, for the good video :)

[@carlosalfredo657]

Excellent

[@brahim_boussadjra]

however i'm Vue js developer but i love your videos since they're of high quality

[@AmanNidhi]

this are useful videos. thanks for creating it. Can you also create a playlist so that the videos are easily available and sequential order. This playlist might help help in understanding the nuance of javascript and web development

[@Fireship]

Thank you, yes I'll do that now that there are a few of them.

[@abhik474]

thanks for this

[@UrielHK]

Amazing!