Image Lazy Loader for WordPress

Lazy Loading could be more accurately described as On-Demand Loading, and in the context of internet programming refers to the loading of a resource off the server only when its absolutely required to render the page or perform a function. The main reasons you’d do this are to reduce data transfers off your site and to minimize the server hits required to render the page.

Today’s modern magazine-style themes with thumbnails, featured articles scroller and the like, make a huge demand on servers on the first load. Consider a fully optioned theme like Arthemia (to the right) which has almost 30 images to download, on top of multiple stylesheets and javascript libraries. While a lot of optimization can be done behind the scenes, there’s no getting away from all those images. Even a dedicated server with Apache’s default 256 MaxClients will groan when you start getting a significant number of simultaneous hits. The simple fact is that these style of themes don’t scale at all well with increased traffic.

The idea of image lazy-loading is to only download the images that are physically within the browser view-port. For example, when I fullscreen the Arthemia site I count 12 visible images (there’s 8 in the scroller at the top) before scrolling down (ie, above the fold). In other words, MOST of the images on the home page aren’t even visible when you first hit it, and more than half of the initial server hits are unnecessary to render the page.

Its the same issue when you put lots of photos in your posts; the browser will download all of them regardless of whether the surfer scrolls down to look at them or not. Meanwhile they have to wait for ALL of them to download, and your server connections are tied up while they do. A few people on slow connections doing that can have a massive impact on your server or, more usually, your allowance of a shared server.

Mika Tuupola’s handy lazy-load javascript works with the popular jQuery library to effect image lazy loading. It prevents the browser from downloading images that aren’t visible, and downloads them as they scroll into view. The script also serializes all requests, getting one image after the other, so you won’t have multiple server connections tied up serving images instead of servicing page requests.

It obviously helps if you’re already using jQuery (as Arthemia is), otherwise you’ll be adding two server hits (jquery.js and lazyload.js) before removing a single image.

I’ve created a plug-in which allows you to easily enable lazy image loading on your site, as well as make use of most of the functionality of the script.

Installing The Lazy Loader Plug-in

1. Download the plug-in (link below), extract, then upload just the lazyloader directory to your plug-ins directory.
2. Activate the Lazy Loader plug-in in WordPress. The plug-in doesn’t make any changes to the database or in fact do anything at all by default.
3. Under the Settings menu you will now see an option for Lazy Loader.

Lazy Loader Settings

The Lazy Loader settings page has the options shown to the right, and are mostly self-explanatory. Setting JS Insertion on ALL pages will override all other insertion options.

If you select Individual Post / Page Control, a Lazy Loader option box will appear on the right-hand side of the post and page editor screens where you can enable or disable Lazy Loading just for that post/page. Initially, you should just enable Lazy Loading for a single page to verify your site still displays correctly and that it will achieve the results you’re after.

You can also select a category so that all posts and pages within that category (eg “Photos”) will be enabled for lazy-loading by default.

Note that “Archive Pages” refers to ALL the archive pages: categories, tags, dates, authors, etc.

Sidebar Images

If you have images in your sidebar, and the get_sidebar() call is at the bottom of your pages – which is typical for right floating sidebars – by default those images probably won’t get displayed when Lazy Loading is enabled. That’s because the script works from the top of the document down looking for displayable images and stops at the first non-displayed image, assuming the rest won’t be visible either. So it will never make it down to your sidebar code.

The Failure Limit setting tells the script how many more images to keep searching for. Set it high (eg 99) to ensure it will continue far enough down to find your sidebar images. The script really only needed an option to search the entire document or not, but anyway..

Place Holder Image

The Placeholder Image is a graphic to display in place of the non-downloaded images as a prompt for the user. The plug-in comes with grey.gif, which is a single pixel image of 43 bytes (still another server hit of course). Just enter the name of the file, which must be in the lazyloader directory. You might get better results applying a background color to the img tag in CSS. This will also allow the “alt” text to be displayed, however it will affect any transparent gifs you might be using.

Image Effects

The script supports the image effects provided by jQuery. However, the effects only work when the image is being rendered from memory. In normal operation where images are being lazy-loaded just as they come into view, the effects aren’t noticeable, the first time at least.

The Threshold option is explained below, and the Container option is explained on the Lazy Loader page.

Caveats

There are a few conditions required for the lazy loader to work as expected.

1. Images (or their containers) must have dimensions; ie, width=”xx” and height=”xx”. The browser can’t lay out the page without image dimensions and hence determine what’s visible prior to downloading them.
2. You might need to specifically set “display:block” for the img tag in your stylesheet (img {display:block;}) to force the browser to create the container once the lazy load script has done its thing. Images are blocks by default, but I’ve found this setting has been necessary for some reason.

Other Considerations

Lazy loading isn’t a magic solution to a seriously stressed server. It flattens the spike caused on the initial loading of pages that contain lots of images and removes a few server hits in an attempt to get a page displayed as quickly as possible and improve response times across the site.

In effect, it delays the surfer, and surfers like things to go faster, not slower. While they might be frustrated at slow-loading pages, they’ll get even more frustrated at waiting for images to download every time they scroll the page, which naturally isn’t the expected behaviour. You can mitigate user annoyance to a degree by setting the Threshold value to something above zero. This causes the script to load images that are that many pixels below the fold, and are hence visible when the surfer scrolls down. This solution works better for smaller images, for instance a page full of thumbnails.

Interactions

Not all display libraries work together, so you should try Lazy Loading a single test page to ensure everything works. For instance, the Frontpage Slideshow plug-in definitely doesn’t work when using the MooTools library – the slideshow images don’t get loaded.

Download

Download Lazy Loader V1.1

Update June 2010: V1.1 – bug fix

Lazy-Loader plug-in has been tested on WordPress V2.8.6 and up. It requires a minimum of 2.7.

The zip file contains the current version of the Lazy Loader script but you can also download the minified version from Appelsiini.net and copy to the LazyLoader directory.

The following page has a number of images and has been enabled for Lazy Loading so you can see the effect.