Improved Async Image Loading and Decoding

[@GeorgeMonsour]

You own the 'nuance' corner of the internet!!

[@morganbaker6894]

Mind...blown. Ok not quite, but still. Came across this attr randomly today after using wp_filter_content_tags() in WordPress and noticed it added decoding attr. A nice little gem here that I will try to exploit in builds. You explained it perfectly too as the MDN docs I saw just made me think 'isn't this just what lazy loading is doing?'.

[@samsonmoses2601]

Stumbled across this and it really helped me although I'm using blurhash I realized I can run an AJAX function that blurs and unblurs the image. Thanks Steve❤❤

[@azox_sudo]

i learned alot and that will help me to improve my code by ALOT ty you so much

[@EvgenichTalagaev]

Спасибо за видео!

[@SteveGriffith-Prof3ssorSt3v3]

ничего.

[@sreekar_s]

How to do this if we were to use picture and source tags?

[@SteveGriffith-Prof3ssorSt3v3]

Picture still needs an img tag as the element that displays the selected source. The img element handles it.

[@sreekar_s]

@@SteveGriffith-Prof3ssorSt3v3 True! Let's say if I'm multiple source tags with their own srcsets'. Then I don't think we can follow this process as we don't know the image that will gets displayed by the browser in the end. Maybe I'm missing something. Thanks for your reply though ☺️

[@SteveGriffith-Prof3ssorSt3v3]

@@sreekar_s it doesn't matter how many sources you have in your html. The browser only asks for one of them.

[@m01d25]

I was just wondering the same thing. Did you find a solution back then?

[@midoone188]

Amazing tutorial but i have a problem. When i refresh the page or scroll very fast to the images (lazy images) i got this Error (Uncaught (in promise) DOMException: The source image cannot be decoded. ) I wrapped the i.decode().then() with setTimeout() and increase the delay for every loop it‘s works fine but i think this is not the solution for this Error Have you any advice to solve this problem Thanks in advance

[@mikebryan3270]

This is like skeleton loading for images. Nice deep dive into using lazy and async with javascript.

[@daishokomiyama]

This is a hidden gem! Thank you

[@ickebins55]

The attribute is decoding not decode.

[@SteveGriffith-Prof3ssorSt3v3]

The attribute in the HTML is decoding. The method in the JS is decode.

[@hardwired66]

cool ❤️