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    Load the entire page plus the first header image 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

User · Answer

If you pass jQuery a function  it will not run until the page has loaded    lt script type  text javascript  gt    function           your header rotation code goes here      lt  script gt

User · Answer

did you try this        yourdiv   load url  function               your functions goes here

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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     we grab the DOM element of the image whose image we want completely loaded we then set an interval to fire every 50 milliseconds  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

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

Examples related to javascript

Examples related to jquery

Examples related to slideshow

Examples related to preload