Why is this channel not having millions of views and subscribers? This channel is loaded with quality and unique content. I wish I had discovered this long ago.
Your videos are so good, I just hope you don't get stressed with so many requests :) Please, just do them at your pace and as it pleases you doing them. I'm just so glad to have access to your "Encyclopedia" Each one is a joy. Whenever it comes out. Thanks!
@@brod515 That is because if it is too slow it beats the point of lazy loading. Why would browser allow lazy loading if you have to wait longer? I think that browser is like : "If I am capable of loading images fast, I will let lazy loading as an option. If I am not, then lets try and load as many images as possible beforehand."
Sir, I would like to request please upload the videos on daily basis. I like your content & the way you thought & write.. Need to see the kind of video in the future, ex: js, angular, new technologies & tricks
I am not able to upload a new video daily. I do this channel in my free time on top of my full time job as a professor. I do have about 850 videos already though - lots to watch. I do have a video where you can post any tutorial requests or vote for requests that have already been made - th-cam.com/video/LCezax2uN3c/w-d-xo.html
Thanks for your response, oh that's great sir no issue & yours all videos are fabulous, it's really helpful to learn the skills & involved in my professional life. whatever you have made, it's just awesome but we want to see more in the future. Need to one request to make video upcoming in your free time sir plz - MEAN stack & Including typescript & node js " full course combination of the project in one series. It will help out to understand proper coding logic & implementation. indeed I asking you a big thing & its time-consuming subject.. Anyhow, overall your concept is too good & it's up to the mark! @@SteveGriffith-Prof3ssorSt3v3
Just want to confirm. Is this the right was to attach events to the image in createImage function? I was told its not performance efficient. Pls throw some light on this!
Absolutely. Using addeventlistener is recommended and performant. The difference is that addeventlistener allows for multiple events of the same type on the same object plus control over bubbling direction in the DOM and self removal after a single call through its options object.
@@SteveGriffith-Prof3ssorSt3v3 Thanks for the reply Steve. In one of my interview, i was told we do need to delegate the event from the closest parent. So, i am very much confused.
This should help - th-cam.com/video/MGstKhPoiho/w-d-xo.html I was talking about using addEventListener as opposed to things like onclick. When you have a group of things that will all or mostly have the same event listener it IS definitely more performant to add the listener to the parent. In the videos I often add listeners to individual objects because it is easier for people to understand what is happening.
Steve, you are such a good teacher and I would really appreciate your perspective on practical use of iife’s with the current version of js. Per my understanding, it’s use is for managing scope, which I can see with var but with let, I’m looking for a pragmatic use that I can use to help bolster my understanding. Thanks 👍🏾
I think this is a good idea but intersection observer allows you to be more precise. The video shows the images being loaded before the third section even begins. It’s not bad for most situations. But what about animations?
It is a simple built in way to improve performance of image loading and reduce bandwidth usage by adding a single html property. Intersection and resize observers can be used in addition to this to manage things like animations. And this can be combined with decode handling too - my next video
The CSS on mine is specific to the HTML and the classes that I'm using for this example page. If your HMTL is different then the layout will be different.
There is rarely anything in web development that works on every browser. It's not just a moving target, more like a dozen moving targets that you have to hit with three arrows at the same time. Safari has it as an experimental feature so within a year it will have ~90% coverage. I put a link at the end of the video to another tutorial about using intersection observers to do lazy loading - th-cam.com/video/1EeVzn02grw/w-d-xo.html I have links to related videos and playlists at the end of every tutorial.
maybe adding 'save-data' and srcset to completed it which to served low res pic even its kinda wierd if you start using 'filepath w' instead of filepath 2x which always use the larger one even if we changed device simulator on chrome
Why is this channel not having millions of views and subscribers? This channel is loaded with quality and unique content. I wish I had discovered this long ago.
Well it has close to 10 million views. But I've been waiting for you to share the channel with your closest 300k friends.
Your videos are so good, I just hope you don't get stressed with so many requests :)
Please, just do them at your pace and as it pleases you doing them. I'm just so glad to have access to your "Encyclopedia"
Each one is a joy. Whenever it comes out.
Thanks!
To summarize:
why does the browser load all images even with lazy when the connection is slow that sounds counter to what it should be doing.
@@brod515 yeah exactly, you'd think that it exists so that slow connections don't have to load every image
@@brod515 There's actually a good resource about that.. you can check about just search up "Browser level image lazy-loading"
@@brod515 That is because if it is too slow it beats the point of lazy loading. Why would browser allow lazy loading if you have to wait longer? I think that browser is like : "If I am capable of loading images fast, I will let lazy loading as an option. If I am not, then lets try and load as many images as possible beforehand."
@@demian5511 this makes sense. thanks
Wonderful Teacher!
could you make more videos about reflow and repaint ?
Please post tutorial requests in the comments here - th-cam.com/video/LCezax2uN3c/w-d-xo.html and vote for the ones you like.
Sir, I would like to request please upload the videos on daily basis. I like your content & the way you thought & write..
Need to see the kind of video in the future, ex: js, angular, new technologies & tricks
I am not able to upload a new video daily. I do this channel in my free time on top of my full time job as a professor. I do have about 850 videos already though - lots to watch.
I do have a video where you can post any tutorial requests or vote for requests that have already been made - th-cam.com/video/LCezax2uN3c/w-d-xo.html
Thanks for your response, oh that's great sir no issue & yours all videos are fabulous, it's really helpful to learn the skills & involved in my professional life. whatever you have made, it's just awesome but we want to see more in the future.
Need to one request to make video upcoming in your free time sir plz - MEAN stack & Including typescript & node js " full course combination of the project in one series. It will help out to understand proper coding logic & implementation. indeed I asking you a big thing & its time-consuming subject.. Anyhow, overall your concept is too good & it's up to the mark!
@@SteveGriffith-Prof3ssorSt3v3
Just want to confirm. Is this the right was to attach events to the image in createImage function? I was told its not performance efficient. Pls throw some light on this!
Absolutely. Using addeventlistener is recommended and performant. The difference is that addeventlistener allows for multiple events of the same type on the same object plus control over bubbling direction in the DOM and self removal after a single call through its options object.
@@SteveGriffith-Prof3ssorSt3v3 Thanks for the reply Steve. In one of my interview, i was told we do need to delegate the event from the closest parent. So, i am very much confused.
This should help - th-cam.com/video/MGstKhPoiho/w-d-xo.html
I was talking about using addEventListener as opposed to things like onclick.
When you have a group of things that will all or mostly have the same event listener it IS definitely more performant to add the listener to the parent.
In the videos I often add listeners to individual objects because it is easier for people to understand what is happening.
Steve, you are such a good teacher and I would really appreciate your perspective on practical use of iife’s with the current version of js. Per my understanding, it’s use is for managing scope, which I can see with var but with let, I’m looking for a pragmatic use that I can use to help bolster my understanding. Thanks 👍🏾
I think this is a good idea but intersection observer allows you to be more precise. The video shows the images being loaded before the third section even begins. It’s not bad for most situations. But what about animations?
It is a simple built in way to improve performance of image loading and reduce bandwidth usage by adding a single html property.
Intersection and resize observers can be used in addition to this to manage things like animations.
And this can be combined with decode handling too - my next video
u are amazing with excellent voice.
What about browser support ? Safari doesn't support loading="lazy"
Yes, Safari still on experimental feature.
Amazing trick :) and well explanation
its good but after paste the code on my sie. all site layout gone wrong.
The CSS on mine is specific to the HTML and the classes that I'm using for this example page. If your HMTL is different then the layout will be different.
@@SteveGriffith-Prof3ssorSt3v3 using wordpress
thanks steve!
Loading=lazy not worked on every browser. Can you add another approach which works on every browser? Appreciate your effort!
There is rarely anything in web development that works on every browser. It's not just a moving target, more like a dozen moving targets that you have to hit with three arrows at the same time.
Safari has it as an experimental feature so within a year it will have ~90% coverage.
I put a link at the end of the video to another tutorial about using intersection observers to do lazy loading - th-cam.com/video/1EeVzn02grw/w-d-xo.html
I have links to related videos and playlists at the end of every tutorial.
maybe adding 'save-data' and srcset to completed it which to served low res pic even its kinda wierd if you start using 'filepath w' instead of filepath 2x which always use the larger one even if we changed device simulator on chrome
thanks a lot
Love it
👍🏼