Simple Image Lazy Load and Fade

David Walsh

3 years ago

One of the quickest and easiest website performance optimizations is decreasing image loading. That means a variety of things, including minifying images with tools like ImageOptim and TinyPNG, using data URIs and sprites, and lazy loading images. It’s a bit jarring when you’re lazy loading images and they just appear out of nowhere which is why I love the fading in route. The page still shuffles if you aren’t explicitly setting image dimensions but the fade in does provide a tiny bit of class. I’ve seen many solutions which accomplish this (some not very good, like my old method) so I thought I’d share my current implementation.

This is a super basic tutorial but considering I’ve seen so many other solutions, I thought I’d share what I’ve implemented; it works under every scenario I’ve tested, including History changes via AJAX (like my site does).

Of course this doesn’t take into account true scroll-based lazy load but that’s generally done by a plugin in your favorite JavaScript framework or a standalone component. If you’re looking for a simple solution, however, this is it!