Loading slideshow images on demand

It is not unusual for clients to want several nice big 'hero' images on their website which fade in and out. Many of the jQuery plugins I've looked at to provide this kind of functionality use HTML markup similar to:

<div id="hero-image">
  <img src="we-rock.jpg" alt="We Rock!">
  <img src="amazing-deals.jpg" alt="Amazing Deals!">
  <img src="our-rivals-suck.jpg" alt="Our rivals suck!">
</div>

<script>
jQuery(function($){

  // get all the slideshow images
  var $slideshow = $('#hero-image img');
  // hide additional images
  $slideshow.slice(1).hide();
  
  // a really simple function to animate banners
  var slideOrdinal = 1;
  changeSlide = function(){
    slideOrdinal = slideOrdinal === $slideshow.length ? 1 : slideOrdinal + 1;
    $slideshow.siblings().filter(':visible').fadeOut(1000).end().eq(slideOrdinal - 1).fadeIn(1000);
  };
  
  // wait before firing
  t = setInterval(changeSlide, 3000);
  
});
</script>

The jQuery plugin will then hide the 2nd and 3rd image and start interating through them. This all works, but it does mean that those additional images are still loaded in when the page renders. Even worse is that if the jQuery which hides them hasn't fired yet, you'll briefly see the additional images which is not very slick.

I decided to take a slightly different approach, which is to only load in the additional images once the jQuery is ready. This means that the additional images are only loaded when I need them (which is good as banner images tend to quite large).

Here's a different way to do it:

<div id="hero-image">
  <img src="we-rock.jpg" alt="We Rock!">
</div>

<script>
jQuery(function($){

  // define additional slideshow images
  var slideshowData = [
    {"src":"amazing-deals.jpg", "alt":"Amazing Deals!"},
    {"src":"our-rivals-suck.jpg", "alt":"Our rivals suck!"}
  ];
    
  // get hero image container
  var $heroImage = $('#hero-image');
  // get the number of additional images
  var slideshowlen = slideshowData.length;
  // check there are any (pointless in this demo!)
  if (slideshowlen > 0){
    // loop and append additional images
    for (var i = 0; i<slideshowlen; i++){
      $img = $('<img>')
        .hide()
        .attr(slideshowData[i])
        .appendTo($heroImage);
    }
    
    // get all images for the slideshow
    var $slideshow = $heroImage.find('img');
    
    // a really simple function to animate banners
    var slideOrdinal = 1;
    changeSlide = function(){
      slideOrdinal = slideOrdinal === $slideshow.length ? 1 : slideOrdinal + 1;
      $slideshow.siblings().filter(':visible').fadeOut(1000).end().eq(slideOrdinal - 1).fadeIn(1000);
    };
  
    // wait before firing
    t = setInterval(changeSlide, 3000);
  }

});
</script>

I'm a big fan of frameworks and jQuery plugins (as re-inventing the wheel is time-consuming and error prone) but, it is always worth knowing how the code works and the pros and cons of using it.

Note: with both these approaches you will need to have some CSS to position the images absolutely, relative to the container or else you'll get a wierd effect! The CSS will be something like:

<style>
#hero-image {position:relative; width:692px; height:258px;}
#hero-image img {position:absolute; top:0; left:0;}
</style>

• Posted in:
• jQuery

2 comments

1. Thanks for this code. I wonder if you could tell me if it is possible to load the images on demand as they are needed for each slide. So rather than load the rest of the images at once when the Dom is ready, instead load each image as it is needed by the slide. In other words
   
   Load one - display
   wait for a few seconds
   Load two - fade in
   wait for a few seconds
   Load three - fade in, etc etc.
   
   This way only one image would be loaded at a time. What do you think, is this possible?
   
   Comment by James Stoddern – December 08, 2011
2. Hi James,
   
   You could just set the src attribute to a blank string when you create the img tags and then populate that attribute later. I guess you could populate the src attribute for the next image in the changeSlide function as that is already being called by a timer.
   
   Comment by John Whish – December 08, 2011