JQuery wait for page to finish loading before starting the slideshow?

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 can try

$(function()
{

$(window).bind('load', function()
{

// INSERT YOUR CODE THAT WILL BE EXECUTED AFTER THE PAGE COMPLETELY LOADED...

});
});

i had the same problem and this code worked for me. how it works for you too!

Answer 2

Well the first can be achieved with the document.ready function in jquery

$(document).ready(function(){...});

The changing image can be achieved with any number of plugins

• http://malsup.com/jquery/cycle/
• http://www.matto1990.com/jquery/slideshow/

If you wish you can check if images are loaded with the complete property. I know that at least the malsup jquery cycle slideshow makes use of this function internally.