Lazy loading only for offscreen images about front-end-performance-checklist

[verlok]

Another thing I get tired to say to the front-end teams I work with is to load the alternative image (which is shown only at mouseover) only at mouseover.

You can read more best practices on how to load images on a repo I’ve recently created.

https://github.com/verlok/productListingPageBestPractices/

What do you think?

[thedaviddias]

You're welcome @verlok and thank you so much for the work! I totally agree with you, it's indeed not specified but should be in the Checklist. Do you want to do a PR?

Thanks to point that out!

[verlok]

Sure! Will do. I just wanted to know what you think about that before doing that.

[thedaviddias]

Hi @verlok, I was reviewing your previous message and I was wondering why on mouseover and not on scrolling?

[verlok]

In most e-commerce websites e.g. yoox.com and others there is an alternative shot shown at mouseover, showing the cloth weared by a model.

My point is: don’t load those alternative images at page landing, but load them lazily when the user requests them, mouseover-ing the product.

If you take a look at this repo and the related live demo, it will all be clear.

[Brunomaio]

And now we got native lazy loading (sorry if it's already in the checklist / mentioned anywhere
https://addyosmani.com/blog/lazy-loading/

[verlok]

@Brunomaio it’s not a thing yet. Native lazyloading will come with Chrome 75 and only under a flag.

Anyway, my vanilla-lazyload script already supports native lazyloading, so you can use the LazyLoad script to do native lazyloading where supported, and JavaScript lazyloading where not supported.

Read this for more information:
https://www.andreaverlicchi.eu/native-lazy-loading-with-vanilla-lazyload/