21 Feb 11

Q: How do you load up a bunch of images in a slideshow without causing long page load times?

A: Load the images on-demand. Here's an example of how to load images on demand when using JQuery Cycle to run a slideshow.

Many times I've needed to load a large quantity of high-resolution images into slideshows or carousels with custom functionality, which leads to problems with loading times. On this client's site I solved the problem with a custom-built image loader using MooTools. In my solution, upon javascript load, all the necessary images had their source changed to a loading image. Once the image was needed (in this case, scrolled onto screen) the image source was changed back to the original, which triggers the loading.

The nice thing about this solution, is that it still works if Javascript is disabled. It may not pretty, but at least your images display.

I ran into the need for an image loading solution again recently, but this time, I was working on a site using JQuery, not MooTools. Since JQuery has a rich library of plugins, I figured there must be something out there ready to go. I was disappointed in what I found. One popular solution, LazyLoad, was first put out in 2008. Apparently though, it doesn't work right, and there is no-one maintaining it to work with newer browsers. The next solution I dug into looked quite promising. JAIL does work well and seems to have active support, but it doesn't work with Javascript disabled. It requires that you modify your HTML to point your images at a dummy source, and hide the real source in an alternate attribute. Unfortunately, if Javascript is disabled, your images will never actually display.

So here's my solution which is a rewrite of what I did in MooTools. This is a JQuery plugin, but if Javascript is disabled, the images still display. Like JAIL, I am using a hidden attribute for the source of the image, but unlike JAIL, I only do this via javascript. There is no need to break your HTML.

/*
* jQuery OnDemand Image Loader
*
* Developed by
* Copyright 2011 - Anthony McLin
* http://anthonymclin.com
* Version 1.0
* Licensed under GPLv2
*/
(function($){
  $.fn.onDemandLoader = function(options) {
 
    // Configuration
    options = $.extend({
      selector: null,
      spinner: null,
      callback : jQuery.noop
    }, options);
 
    //Change the source of all the images to point to the loading image
    $(options.selector).each( function() {
      //Write the original source to a temporary location
      $(this).attr('_src', $(this).attr('src'));
      //Change the image source to the loading image
      $(this).attr('src', options.spinner);
    });
  };
 
  //Load a specific image by changing the source back
  $.fn.onDemandLoader.loadImage = function(img) {
    $(img).attr('src', $(img).attr('_src'));
  };
})(jQuery);
 

Here's how I used it in conjunction with JQuery Cycle. As you can see, when each slide starts displaying, the next one is triggered to load the image.

/* Author: Anthony McLin
 * Fires the slideshow
 */
$(document).ready(function() {
  //Swap out the images for on-demand loading
  $('.slideshow').onDemandLoader({
      selector:  '.slideshow img',
      spinner:  'common/blank.gif'
    });
 
  //Start the slideshow
  $('.slideshow').cycle({
    fx:     'fade',
    speed:    500,
    timeout:  5500,
    next:    '#next',
    prev:    '#prev',
    before:    function(currSlideElement, nextSlideElement, options, forwardFlag) {
      //Trigger the next slide for loading
        $('.slideshow').onDemandLoader.loadImage(nextSlideElement);
      }
  });
});
 

You'll also notice that I'm providing a loading image or "spinner" that gets displayed until the loading happens. I recommend a 1 pixel square blank gif for this to prevent browsers from displaying the ugly broken image icon.

One big caveat.

I highly recommend defining the size of your images via CSS, otherwise once they load, they'll display at the same size as your spinner did. This can lead to tiny thumbnails where you want a nice big image.