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

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.

The $(document).ready mechanism is meant to fire after the DOM has been loaded successfully but makes no guarantees as to the state of the images referenced by the page.

When in doubt, fall back on the good ol' window.onload event:

window.onload = function()
{
  //your code here
};

Now, this is obviously slower than the jQuery approach. However, you can compromise somewhere in between:

$(document).ready
(
  function()
  {
    var img = document.getElementById("myImage");

    var intervalId = setInterval(
                        function()
                        {
                          if(img.complete)
                          {
                            clearInterval(intervalId);
                            //now we can start rotating the header
                          }
                        },
                        50);
  }
);

To explain a bit:

1. we grab the DOM element of the image whose image we want completely loaded

2. we then set an interval to fire every 50 milliseconds.

3. if, during one of these intervals, the complete attribute of this image is set to true, the interval is cleared and the rotate operation is safe to start.

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.

did you try this ?

$("#yourdiv").load(url, function(){ 

         your functions goes here !!!

}); 

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!

If you pass jQuery a function, it will not run until the page has loaded:

<script type="text/javascript">
$(function() {
    //your header rotation code goes here
});
</script>