Question

I have a site with a rotating header image (you’ve all seen them). I want to do the following:

1. Load the entire page plus the first header image
2. Start the header image slideshow transitioning every x seconds or when the next image has finished loading, whichever is later

I haven’t really need an example that truly does this.

Answer 1

You probably already know about $(document).ready(…). What you need is a preloading mechanism; something that fetches data (text or images or whatever) before showing it off. This can make a site feel much more professional.

Take a look at jQuery.Preload (there are others). jQuery.Preload has several ways of triggering preloading, and also provides callback functionality (when the image is preloaded, then show it). I have used it heavily, and it works great.

Here’s how easy it is to get started with jQuery.Preload:

$(function() {
  // First get the preload fetches under way
  $.preload(["images/button-background.png", "images/button-highlight.png"]);
  // Then do anything else that you would normally do here
  doSomeStuff();
});