Lazy load Unsplash images

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.

1 Like

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

2 Likes

It might be this one?

3 Likes

^ that’s the one!

2 Likes

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.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.