Lazy load Unsplash images

javascript

#1

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?


#3

This timely article on CSS tricks may be of use.


#4

I think I recall @m3g4p0p gave a vanilla JS solution a while back. I can’t find it though…


#5

It might be this one?


#6

^ that’s the one!


#7

I don’t see that there is a graceful degradation for lazy loading if JS is not available. Am I missing something?


#8

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.