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...
Пікірлер: 241
@gerritweiermann795 жыл бұрын
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!
@ImperiumLibertas5 жыл бұрын
Absolutely outstanding quality. Thanks again Jeff!
@ArabianAK5 жыл бұрын
Found your channel recently and I love it! Keep on keeping on.
@SprHero5 жыл бұрын
I didn't know this existed. Thanks for the clear and to the point video! Looking forward to your next one 😉
@Fireship5 жыл бұрын
Nice, it's one of my favs :)
@LOOTS2435 жыл бұрын
@@Fireship easy thread gains 💪💪
@islamibrahim81212 жыл бұрын
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
@solifuse80792 жыл бұрын
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!
@isaacdiaby5 жыл бұрын
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
@Fireship5 жыл бұрын
Great to hear, thanks for watching!
5 жыл бұрын
Absolutely love all of our videos Jeff! Thanks for your hard work and thanks for being amazing.
@Fireship5 жыл бұрын
Thank you Kevin :)
@nicholassaephanh44075 жыл бұрын
Dude I haven't touched code in a while and you make me hyped up to code lol. This is SO good.
@chriswindsor14175 жыл бұрын
Great video! Love this kind of content. You explain everything so effectively and timely.
@Blagel975 жыл бұрын
Really thorough walkthrough! Love your vids man
@RahulSingh-rr9hx2 жыл бұрын
Thanks dude, for not making 20000000000mins long video with unnecessary explanation. Thanks for keeping it Lit 🔥🔥
@salmanwap5 жыл бұрын
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.
@kangqian82885 жыл бұрын
Always love your channel on angular typescript :)
@akashrajpurohit975 жыл бұрын
I like this 'Code this, Not that' section alot.. keep em coming🙌
@belahcenebenzaratahar57085 жыл бұрын
Thank you for not wasting my time! short and yet covering it all.
@zeeshanmh2155 жыл бұрын
Very clear and concise tutorial. Waiting for more like this 😍
@themindstorm99475 жыл бұрын
Thanks for all these tutorials!
@FinlayDaG33k5 жыл бұрын
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!
@PaurakhSharma5 жыл бұрын
Thank you for these amazing videos.
@markopantovic1865 Жыл бұрын
This video is amazing mate! Thank you for this quality content. Keep it up!
@freeeedl5 жыл бұрын
Thx for all your stuff. I like your style and also listen to your voice ^^
@SurendraSinghChhabra5 жыл бұрын
Really short and simple video. Thanks !!
@SamuelCamargo10005 жыл бұрын
Thanks for this subject. Added a lot to my dev repository knowledge.
@naga20545 жыл бұрын
Thanks Jeff as usual great video. My expectation from you is always #LearnWhatYouDontKnow 😍
@jijinp16125 жыл бұрын
Short and Useful stuff. Thank A lot
@pb14319855 жыл бұрын
Quick demo and useful information that can be implemented in any real life project
@srukshan985 жыл бұрын
This is awesome! Didn't know that it is that easy... Thank you for this amazing video
@johnjoseph82945 жыл бұрын
Once again great tutorial. Hat off to you men!
@mastercode78514 жыл бұрын
you are amazing , i would love a full project from you hopefully
@nasrmgk5 жыл бұрын
Awesome channel with useful informations
@saadabbasi20635 жыл бұрын
I appreciate that you changed your videos thumbnail, seems like everybody started using similar to what you had previously. 😃
@Fireship5 жыл бұрын
I know, I see that design everywhere now. This design is harder to copy :)
@adriandinca56825 жыл бұрын
Thank so much for mentioning that quicklink library
@danielsimionescu2985 жыл бұрын
Thank you so much! Exactly what I was looking for 😄
@didimedina48585 жыл бұрын
Wow this is great! Going to spend sometime tinkering with this and animejs this upcoming weekend :)
@SoundFilmDesign5 жыл бұрын
Awesome video.. and awesome shirt!
@The-Average-Gamer5 жыл бұрын
Awesome topic, please do more
@zidalo5 жыл бұрын
Great video! I want that t-shirt!
@ashwinshenoy63605 жыл бұрын
Your firebase related stuff is really good.
@AungBaw5 жыл бұрын
Super crisp quality 🔥 fireship shirt yes!
@firaskudsy5 жыл бұрын
U keep posting amazing videos.. 🙌
@balajkhan98945 жыл бұрын
Love your content to the point 👍
@jensbienias11575 жыл бұрын
This is so helpful. Thanks a lot!
@mateja1765 жыл бұрын
Such an outstanding ambassador of JavaScript 👑
@satajyotidhawa49375 жыл бұрын
Awsome video.its helps me to learn this new thing
@ezeeok5 жыл бұрын
Love this series!
@giancarlosisasi41375 жыл бұрын
Awesome video, thanks a lot!
@idlevandal695 жыл бұрын
This is a game changer.. I usually avoid scrolling animations, not anymore!!!
@scottmccartney15185 жыл бұрын
Great video, been looking to implement Angular Material's scrolling soon!
@polinistinga15 жыл бұрын
Awesome work!
@vysanthskurup43745 жыл бұрын
Excellent explanation 👍
@divinedela91255 жыл бұрын
Tnx Jeff.. great video as always
@ssikarim Жыл бұрын
The video was very useful for me. thanks
@nickstrands5 жыл бұрын
This is so useful to me right now !
@amirfawzy11475 жыл бұрын
first time to know that there's something called IntersectionObserver in javascript ... very good tip and efficient
@karsongrady5 жыл бұрын
Thank you! Great video. I like the vanilla javascript videos
@Fireship5 жыл бұрын
Thank you, I'll be making one of these every couple weeks.
@chellappanv22815 жыл бұрын
Thanks for the great video!!!
@FauzulChowdhury5 жыл бұрын
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.
@sivuyilemagutywa52865 жыл бұрын
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
@Shashank.Shinde5 жыл бұрын
I learned a lot firebase stuff from you
@MercyFromOverwatch22 жыл бұрын
Jeff is my favourite tech youtuber!
@vellengaming5 жыл бұрын
Great video thank you sir!
@elmotareal5 жыл бұрын
Damn! Man! This was a "mic drop" quality video :)
@natanfourie5 жыл бұрын
Nice to know this trick 🙂👌
@thepotatokitty5 жыл бұрын
I was browsing through KZfaq for some angular tutorials, found you... Best channel for the angular and firebase tutorial, coz ur video contains quality content not 💩 :-P
@BytesAndBrackets5 жыл бұрын
Amazing.. never knew it before
@25isfunnierthan245 жыл бұрын
Wow that's awesome! Didn't know that even existed
@just0for0adult5 жыл бұрын
Thanks for the knowledge shared
@MyIvanch5 жыл бұрын
I love your content !
@anawhite25624 жыл бұрын
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
@Fireship4 жыл бұрын
Welcome to the channel!
@ZachInSpace5 жыл бұрын
Love it, thank you!
@brahim_boussadjra5 жыл бұрын
however i'm Vue js developer but i love your videos since they're of high quality
@giangonzaga49005 жыл бұрын
Wonderful thumbnail!
@misopetrik2 жыл бұрын
Great video!
@lutaseb5 жыл бұрын
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
@amritgupta17925 жыл бұрын
You guys are awesome
@boradmay5 жыл бұрын
Very helpful. Just know this api.
@dwscheng5 жыл бұрын
Great content!!!
@sourishdutta96004 жыл бұрын
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.
@elliotheath53665 жыл бұрын
Good stuff, Jeff!
@Shivamethical5 жыл бұрын
Hi I found a minor improvement for the same code when we are writting bad code that time - const src = img.getAttribute('data-lazy'); if(src) { // null check here img.setAttribute('src', src); img.classList.add('fade'); } If we dont check null so it will make null network requests . :) Thanks very useful contents.
@aarond309 Жыл бұрын
I know this is an *old* comment, but fyi, you could also modify the original query selector to “img[data-lazy]” to ensure that every image received has a data-lazy property(though a null check is still good in case it changes somehow after attaching the listener).
@Shivamethical Жыл бұрын
@@aarond309 Yeah Good.
@harshitjoshi30825 жыл бұрын
The t shirt looks good !
@mendisterenfeld26685 жыл бұрын
Great video.
@devangrojasara90805 жыл бұрын
Awesome Videos
@divanvanbiljon76035 жыл бұрын
Awesome shirt!
@hectorr.cobian10205 жыл бұрын
Damn boi, thanks for the video
@monsieurBoutte4 жыл бұрын
Beautiful
@antlemec5 жыл бұрын
finally understood what lazy loading is ...
@lj0045 жыл бұрын
Thanks as always!
@vaibhav11805 жыл бұрын
Now it's supported in both Safari and iOS Safari, Cheers!
@JefersonLimaAlmeida5 жыл бұрын
Thank you, for the good video :)
@felixdorrschuck9105 жыл бұрын
Thanks alot!
@nuwang15 жыл бұрын
Love it thank you. I use gatsby for most of this but good to know for when I'm not using gatsby!
@abhik4744 жыл бұрын
thanks for this
@peoplethesedaysberetarded5 жыл бұрын
Hmm. It’s clear that I’ll have to look and see if I can roll this into GatsbyJS. I’ve got a small upcoming project that’s image-heavy (30+ images, SPA, SSR for analytics, content editing by the client via headless CMS).
@Fireship5 жыл бұрын
FYI there are also packages that do all the work for you www.npmjs.com/package/vanilla-lazyload
@joedyer19894 жыл бұрын
Awesome tut! I just wondered what the difference between/what's best to use - the unobserve or the disconnect method?
@carlosalfredo6575 жыл бұрын
Excellent
@AmanNidhi5 жыл бұрын
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
@Fireship5 жыл бұрын
Thank you, yes I'll do that now that there are a few of them.
@rithinprakash50455 жыл бұрын
Always sharp
@ikezedev5 жыл бұрын
Liked before I watched it.... And when I did watch it, I wanted to love it but KZfaq hasn't got any love button.... 😍
@Fireship5 жыл бұрын
WINNER! Congrats, direct message me with your address and shirt size :)
@ikezedev5 жыл бұрын
@@Fireship Thanks boss 😍 Name: Eze Kingsley Ikechukwu Address: Department of Geology, University of Nigeria Nsukka (UNN), P.O. Box 3236, Nsukka 410001, Enugu State, NIGERIA. Shirt size: XXL