Lazy load Unsplash images



I am loading Unsplash images from 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.