Improved Async Image Loading and Decoding

This video explains the process of image eager and lazy loading followed by the decoding process and how you can make your web pages run more efficiently by using the decoding attribute and the decode( ) method.

[GeorgeMonsour]

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

[morganbaker]

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?'.

[samsonmoses]

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

[mikebryan]

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

[midoone]

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

[sreekar_s]

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