How to Properly Lazy Load Images

While still an experimental feature in Safari that requires a flag to enable it, we now have a loading attribute that we can add to our HTML image elements to tell the browser how we want their loading to occur - lazy or eager.

[muhammedabdulganiyyishola]

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.

[ricardodesirat]

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!

[fullstackrdev]

To summarize:

<img loading="eager" - just load it all dont care
<img loading="lazy" - wait a bit, load when im about to go on that section
<img loading="lazy" - WHEN on slow connection, browser automatically detect so it will load ALL images.

Browser support started since:

Chrome - 77~ (Sept 10, 2019)
Edge - 79~ (Jan 15, 2020)
Firefox - 75~ (April 8, 2020)
Safari - 13.1~ (March 23, 2020) Experiment Features - Enable in Settings

~ caniuse. com

Thank you. Awesome content.

[Chris-qgkc]

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

[mohammedabdulaziz]

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

[Kanexxable]

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?

[saisagarsharma]

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!

[shubhamlodhi]

Loading=lazy not worked on every browser. Can you add another approach which works on every browser? Appreciate your effort!

[chandlerzhu]

could you make more videos about reflow and repaint ?

[fsbgaming]

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

[volkankahraman_]

What about browser support ? Safari doesn't support loading="lazy"

[ramchDash]

its good but after paste the code on my sie. all site layout gone wrong.