Lazy Loading Images on a WordPress Blog

My technical blog is pretty bare when it comes to images, but the photo blog I’m working on has a lot of them (obviously). I have seen some other photo blogs lazy load their images to conserve bandwidth, and I wanted to add this feature to my own blog, too.

I found this WordPress plugin that does the trick, but when I looked into the code, I saw it was forcing jQuery 1.6.1 when the latest version of WordPress (3.3.1) ships with jQuery 1.7.1. I also noticed that the version of the jQuery Lazy Load Plugin it wraps was out of date — 1.5.0 vs. 1.7.1. (The jQuery Lazy Load Plugin happens to have the same version number as the version of jQuery shipped with WordPress — very confusing all around.)

Since the WordPress plugin was already on GitHub, I forked the repo with the intention of updating the plugin. I thought it would be as simple as removing the hard-coded jQuery 1.6.1 dependency and updating the embedded copy of the jQuery Lazy Load Plugin. Of course, it wasn’t that simple.

Newer versions of the jQuery Lazy Load Plugin require that you alter your HTML, because some “new browsers” (I’m still not sure which ones — Safari? or all Webkit-based browsers?) will load images even if the src attribute is removed with JavaScript. So if your original image looked like this

<img src="/images/cat-picture.jpg">

You would have to change your markup to

<img src="/images/placeholder.png"
  data-original="/images/cat-picture.jpg"
  class="lazy">
<noscript><img src="/images/cat-picture.jpg"></noscript>

The <noscript> part is actually optional, but browsers with JavaScript disabled won’t load the images at all without it.

The existing WordPress plugin was essentially a shim to load the jQuery Lazy Load Plugin. To support the newer version of the jQuery Lazy Load Plugin, it would have to hook into various WordPress filters to modify <img> tags to add the lazy classes and <noscript> fallbacks.

After about half an afternoon of tinkering, I got all the pieces in place and had the updated plugin working on my photo blog. The regex I’m using might be a little too strict, but overall the plugin is nice and self-contained. It adds all the right CSS and JS in all the right places, so all you need to do is install and activate the plugin like before. If you’re interested, you can grab the updated code from my fork on GitHub. I also sent a pull request in case the original author is interested.

This tip was reposted from my blog, jontai.me