Page preloader when large amounts of data are loading.

I have several complicated report with large <Cfquery's
I need a page preloader, as they can take several seconds to load.
i have tried the java ones, however they start after the CFQuerys

any ideas how to get  a preloader to work
kleighAsked:
Who is Participating?
 
digicidalConnect With a Mentor Commented:
What I have done is created a <DIV> that contains the loading page display, and then a second div that contains the rest of the page with the report in it.  Use CFFLUSH in between to force the first part of the page to display immediately... that will cause the loading DIV to display... and the rest of the page to process... then at the bottom of the page (the very bottom) add a javascript function to make that display div invisible.

I haven't actually used it for queries, but there are examples of this in the CFFLUSH documentation, however I have used it where I had a great deal of DHTML being done for a huge record set that had collapseable/expandable regions in the output.  Essentially I made an expand and collapse function for each header row as well as 4 dynamic functions controlling inline calls for each record to popup images of invoices, purchase history, stats, etc..  Since this because a HUGE page on large record sets it would appear that the browser had timed out - but it was actually still downloading the page text itself.   Because this took 20secs to 2mins depending on the browser and machine used to view the page, I added the loading div.  Here's a (truncated) example:
<div id="pleaseWaitMsg" align="center" style="padding:10px; border:2px solid #FFCC00; font-size:12px;">Please be patient... Preparing Display.</div>
<div class="label_2">Billing Documents</div>
	<div style="margin-top:3px; margin-bottom:3px;">
	<script language="javascript">
	// HERE I DO ALL OF MY TOP LEVEL FUNCTIONS.
	</script>
	<cfoutput query="qMyQuery.BillingData" group="CustomerName">
		<script language="javascript">
		// HERE I DO ALL OF MY SECOND LEVEL DYNAMIC JAVASCRIPT FUNCTIONS.
		</script>
		<div>
			<!--- Header (Cust) Grouping Data Output--->
		</div>
		<cfoutput>
			<script language="javascript">
			// HERE I DO ALL OF MY RECORD LEVEL DYNAMIC JAVASCRIPT FUNCTIONS.
			</script>
			<div>
				<!--- Individual ROW output for this group--->
			</div>
		</cfoutput>
	</cfoutput>
	</div>
<script language="javascript">
	document.getElementById('pleaseWaitMsg').style.display="none";
</script>

Open in new window

0
 
debuggerauCommented:
display a page with a query to load the report into the next page would just require javascript.

After a few seconds load this page........
http://www.tizag.com/javascriptT/javascriptredirect.php
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.