Delay Page Load using JQuery

I had a situation where I wanted to delay the load of my page, until all content was loaded.  The problem was, I was making a call to a PHP routine that would build a dynamic XML file that I was using to build a Spry data set.  Yeah, Yeah, I know, Spry right.  Don’t worry, working to move everything over to jQuery. Anyway, if you are looking for a simple solution to delay page load using JQuery, read on…

The Problem

Anyway, everything was working fine, but there was a slight flicker when the page loaded.  The PHP in this external call created a record set based upon my query, and simply looped through the records to build the XML file. So on initial load of the page, the page was displayed with everything but my data from the database, and once the Spry data was created the page was loaded with that data.  From the user’s experience, I would see the initial page, without any of the dynamic data, and then a split second later my dynamic data was loaded.

My goal was to clean up the user experience, and hold off loading the page until everything was ready (including the dynamic data).  I ended building a solution that would delay page load using JQuery, and it’s working better then I was initially hoping.

The Solution

What I ended up doing was hiding both Content and Footer DIV’s when the DOM was loaded, upon Window load I ended up showing both those DIV’s with a slight delay.  The end user result was a blank page with just my body and header information displayed, and then the content slid in from the right with all dynamic data loaded.  It’s actually a better effect that what I was using initially.

//Hide the footer on this page so we don't get the flicker prior to the XML data being loaded

$(document).ready(function() {
  $(".content").hide();   
  $(".footer").hide();
}); 
$(window).load(function() {
   $(".content").show(500);
 }); 
//Go create the XML DS that will be used as part of SPRY on this page 
var dsAdvisor = new Spry.Data.XMLDataSet("XML Data/xml-advisor-list.php", "root/row");

It’s pretty self explanatory.  The (window).load function will show the “content” div after a 500 ms delay.  By calling out an explicit delay, you will get the effect of having this div “slide in” from the right of the screen after the delay you call out.  This 1/2 second delay gives me time to make the call to the XML file, build the Spry data, load it to the page, all before it’s displayed to the end user.

A simple solution to delay page load using JQuery.