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
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.
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
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.
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).
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!
3:56 - You used observer.disconect, because you created observers for each element, but why don't we just create only one observer and then unobserve each element with observer.unobserve(entry.target) ?
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
I was browsing through RUclips for some angular tutorials, found you... Best channel for the angular and firebase tutorial, coz ur video contains quality content not 💩 :-P
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 RUclips. and don't forget to send me da t-shirt :p
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.
@@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
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.
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?
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
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).
Is it worth to manipulate the app beforehand and act upon user-agent support? I mean If I am to use any API that is not widely supported on mobile browsers, is it worth to write a fallback version of my-cool-components? Thanks!
«For most websites, adding this attribute to inline images will be a performance boost and save users loading images that they may not ever scroll to. If you have large numbers of images and want to be sure that users of browsers without support for lazy-loading benefit you[...]» Safari uses to not support this feature and now does on version 15.4 and +
Can you make a video on how to lazy-load images from firestore in an angular app through renderer service and not through DOM so that it can be used with angular universal?
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!
I didn't know this existed. Thanks for the clear and to the point video! Looking forward to your next one 😉
Nice, it's one of my favs :)
@@Fireship easy thread gains 💪💪
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
Thanks dude, for not making 20000000000mins long video with unnecessary explanation. Thanks for keeping it Lit 🔥🔥
Found your channel recently and I love it! Keep on keeping on.
Absolutely love all of our videos Jeff!
Thanks for your hard work and thanks for being amazing.
Thank you Kevin :)
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
Great to hear, thanks for watching!
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
Welcome to the channel!
I appreciate that you changed your videos thumbnail, seems like everybody started using similar to what you had previously. 😃
I know, I see that design everywhere now. This design is harder to copy :)
first time to know that there's something called IntersectionObserver in javascript ... very good tip and efficient
Absolutely outstanding quality. Thanks again Jeff!
Quick demo and useful information that can be implemented in any real life project
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!
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.
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
Dude I haven't touched code in a while and you make me hyped up to code lol. This is SO good.
Thank you for not wasting my time! short and yet covering it all.
Thanks Jeff as usual great video.
My expectation from you is always #LearnWhatYouDontKnow 😍
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.
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).
@@aarond309 Yeah Good.
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!
I like this 'Code this, Not that' section alot.. keep em coming🙌
Jeff is my favourite tech youtuber!
This video is amazing mate!
Thank you for this quality content. Keep it up!
Always love your channel on angular typescript :)
Great video! Love this kind of content. You explain everything so effectively and timely.
Such an outstanding ambassador of JavaScript 👑
Really thorough walkthrough! Love your vids man
This is a game changer.. I usually avoid scrolling animations, not anymore!!!
Very clear and concise tutorial. Waiting for more like this 😍
3:56 - You used observer.disconect, because you created observers for each element, but why don't we just create only one observer and then unobserve each element with observer.unobserve(entry.target) ?
The real question is why we're iterating over the entries when each observer is supposed to have only one entry.
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
Thank you for these amazing videos.
Thx for all your stuff. I like your style and also listen to your voice ^^
Thanks for this subject. Added a lot to my dev repository knowledge.
I was browsing through RUclips for some angular tutorials, found you... Best channel for the angular and firebase tutorial, coz ur video contains quality content not 💩 :-P
Great video!
I want that t-shirt!
Awesome channel with useful informations
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 RUclips.
and don't forget to send me da t-shirt :p
Thank so much for mentioning that quicklink library
Thanks for all these tutorials!
Really short and simple video. Thanks !!
Wow this is great! Going to spend sometime tinkering with this and animejs this upcoming weekend :)
Now it's supported in both Safari and iOS Safari, Cheers!
Your firebase related stuff is really good.
you are amazing , i would love a full project from you hopefully
Awesome video.. and awesome shirt!
Super crisp quality 🔥 fireship shirt yes!
Wonderful thumbnail!
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.
Liked before I watched it.... And when I did watch it, I wanted to love it but RUclips hasn't got any love button.... 😍
WINNER! Congrats, direct message me with your address and shirt size :)
@@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
UPDATE:
you can lazy-load an img by adding loading='lazy' attribute
```
```
Came across this old video as part of a playlist and yeah, this comment should probably be pinned
I learned a lot firebase stuff from you
The t shirt looks good !
This is awesome! Didn't know that it is that easy... Thank you for this amazing video
U keep posting amazing videos.. 🙌
Awesome work!
however i'm Vue js developer but i love your videos since they're of high quality
This is really cool! Thanks for a very nice explanation
Short and Useful stuff. Thank A lot
Once again great tutorial. Hat off to you men!
Great video, been looking to implement Angular Material's scrolling soon!
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.
Thank you so much! Exactly what I was looking for 😄
Awesome topic, please do more
finally understood what lazy loading is ...
Awesome shirt!
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?
Excellent explanation 👍
Awsome video.its helps me to learn this new thing
Thank you! Great video. I like the vanilla javascript videos
Thank you, I'll be making one of these every couple weeks.
Damn! Man! This was a "mic drop" quality video :)
Nice to know this trick 🙂👌
Love your content to the point 👍
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
Thank you, yes I'll do that now that there are a few of them.
You guys are awesome
The video was very useful for me. thanks
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).
FYI there are also packages that do all the work for you www.npmjs.com/package/vanilla-lazyload
This is so useful to me right now !
Great video!
Excellent
Love this series!
Wow back in the day before the rebrand
Great content!!!
Awesome video, thanks a lot!
Beautiful
Thanks for the knowledge shared
Wow that's awesome! Didn't know that even existed
Awesome Videos
Awesome tut! I just wondered what the difference between/what's best to use - the unobserve or the disconnect method?
Great video.
Tnx Jeff.. great video as always
Is it worth to manipulate the app beforehand and act upon user-agent support? I mean If I am to use any API that is not widely supported on mobile browsers, is it worth to write a fallback version of my-cool-components? Thanks!
This is so helpful. Thanks a lot!
why not just set the attribute "loading" of your img?
is even more efficient, isn't it?
«For most websites, adding this attribute to inline images will be a performance boost and save users loading images that they may not ever scroll to. If you have large numbers of images and want to be sure that users of browsers without support for lazy-loading benefit you[...]» Safari uses to not support this feature and now does on version 15.4 and +
Thanks for the great video!!!
I am usually a quiet observer but now gladly comment for having the chance to win such a nice T-Shirt!
Amazing.. never knew it before
Always sharp
Good stuff, Jeff!
Love it, thank you!
Can you make a video on how to lazy-load images from firestore in an angular app through renderer service and not through DOM so that it can be used with angular universal?