Only load images when they're about to be shown on screen
What problem shall it solve?
Keep internet traffic to a minimum
Make loading imgs faster (on slower internet speeds)
Prevent ugly img loading
Describe the solution you'd like
Instead of the img itself, a smaller, blurry version is loaded first.
All images are loaded with the html loading="lazy" attribute and there should be a javascript fallback if the browser doesn't support the attribute yet.
As soon as the big image is loaded, it fades in on top of the small image.
(The small image and the large image have to be in the exact same position.)
Short feature description:
Only load images when they're about to be shown on screen
What problem shall it solve?
Describe the solution you'd like
Instead of the img itself, a smaller, blurry version is loaded first.
All images are loaded with the html loading="lazy" attribute and there should be a javascript fallback if the browser doesn't support the attribute yet.
As soon as the big image is loaded, it fades in on top of the small image.
(The small image and the large image have to be in the exact same position.)
Optional: A loading animation?