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