Simple jQuery Cycle Lazy Load Solution

For some time now I have been meaning to create a simple solution to prevent unneeded content from loading into slides that haven’t yet been displayed. The reason behind this is to reduce the number of HTTP request unnecessarily made when a page first loads to increase the speed of a website.

If you haven’t come across the Cycle plugin for jQuery before, it’s a slideshow plugin that supports many different types of transition effects. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more. It also supports, but does not require, the Easing Plugin. For more information or to see an example of it in action, make sure to checkout the official plugin website at:
http://jquery.malsup.com/cycle/

A typical use for cycle is to fade / scroll between multiple images and below is an example of how this would usually be done:

HTML:

Slide 1
Slide 2
Slide 3
Slide 4...

CSS:

ul#cycle_example, ul#cycle_example li {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 940px;
  height: 300px;
  display: block;
  text-indent: -9999px;
}

JavaScript:

My idea was to modify this example which, by default will load all of the images specified within the inline CSS on each of the li’s so that only the first image would be loaded when the page was opened and then as required additional images would be loaded in.

The benefits from this are fewer HTTP requests when the page is loaded meaning a faster loading, more responsive site and potentially bandwidth saving if not all of the images are viewed before the user navigates from the page.

The way in which I went about doing this was really simple using the HTML5 custom data attribute. Simply, the specification for custom data attributes states that any attribute that starts with ‘data-’ will be treated as a storage area for private data (private in the sense that the end user can’t see it – it doesn’t affect layout or presentation).

This allows you to write valid HTML5 mark-up while, simultaneously, embedding data within your page. A quick example:

For our example we will be replacing each of our existing li’s as follows:
Before:

Slide 1

...


After:

Slide 1

...

As there is now no CSS background image or <img> element, the image won’t be downloaded. If you were to upload this to a test environment you would just see whitespace.

Now what we need to do is write some very simple jQuery to do 2 things:

Show the first image instantly
Load in the next image(s) as required just before the transition is to take place

jQuery has an easy method of selecting the first element when there are multiple as in our example as follows:

var img = $('ul#cycle_example li:first').attr('data-cycle-image');

This will select the contents of our HTML5 data attribute for the first li (the one we want to display instantly). What we then want to do is use this new variable (img) to set a CSS background image as we had originally – This will force the browser to download the image and show it to the visitor. This would be done as follows:

$('ul#cycle_example li:first').css('background', 'url(' + $(this).attr('data-cycle-image') + ') center center no-repeat').removeAttr('data-cycle-image');

Finally, for the second part, we need the next image to load just before the slide is transitioned to be visible. To do so I utilised one of the callbacks within jQuery (before). Any function specified here will be called just before a transition takes place. Here is the final JavaScript I used:

Here is the entire code from this example (except for images):

< !DOCTYPE HTML>








Slide 1
Slide 2
Slide 3
Slide 4...

I currently don’t have a live example on any sites that aren’t heavily in development and as such aren’t fit for linking to at present. I’ll make sure to get some links up as soon as the sites are set live.

If you use the code in the mean time, please let me know how you got on and post a link to your site in the comments for other users to see a working example online.

Hope this helps you to create a more responsive website.

Updated: 09/01/2012 – Ensure images are downloaded before cycle begins the transition