I am loading Unsplash images from source.unsplash.com as a background images. Is there a way to lazy load them or show any blurred background image until they are completely loaded?
This timely article on CSS tricks may be of use.
I think I recall @m3g4p0p gave a vanilla JS solution a while back. I can’t find it though…
It might be this one?
^ that’s the one!
I don’t see that there is a graceful degradation for lazy loading if JS is not available. Am I missing something?
No there doesn’t seem to be a fallback in that method.
I guess you could have noscript tags with the real image and use a .nojs class on the html to hide the data src images etc. Seems a bit clunky though.