Too many projects, too little time

Pixelpost is a very popular framework for photoblogs due to its simplicity and ease of tweaking. A while back I posted an article on how to enable keyboard navigation on a pixelpost photoblog. It works very well considering it allows mouse free browsing. But the browsing experience can be improved even more.

Lets consider how a photoblog is browsed most of the time. A visitor typically lands on a home page showing the latest image and goes through the previous images sequentially, spending a few seconds on each image. Leveraging this fact, if the “previous” image is downloaded in the background using javascript right after the current image, it will be almost if not completely ready for viewing when the visitor is on the “previous” image page. The same can be done for the “next” image, but in most of the cases that image will already be in the browser cache.

This is a very simple change for a tangible usability benefit. Below are my tweaks:

index.php:

// expose the previous image name through tags, so previous images can be
// pre-downloaded in the background for faster browsing experience
$tpl = ereg_replace("<IMAGE_PREVIOUS_NAME>",$image_previous_name,$tpl);

templates/theworldin35mm/image_template.html:

window.onload = function() {
  ...
  var prevImg = new Image(); // for downloading prev image in background

  img.onload = function(evt) {
    ...
    // after current image load, load previous image in the background
    if('<IMAGE_PREVIOUS_NAME>' != '') {
      prevImg.src = '<SITE_URL>images/<IMAGE_PREVIOUS_NAME>';
    }
  }
  ...
};

To verify that this extra javascript is actually doing its job, look at the Net section in Firebug (in Firefox browser, ofcourse). Clear the cache first. On first page load it will show several items getting downloaded. On left arrow, the previous image page will load, and then you can see that an extra image got downloaded at the bottom. Compare with and without my code. Here is a screenshot: