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 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();
});

Answer 2

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 3

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.

Answer 4

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.

Answer 5

did you try this ?

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

         your functions goes here !!!

}); 

Answer 6

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>