Partially Display a 'Page Loading - Please Wait' Mid CFML Processing Page?

Posted on 2009-05-20
Last Modified: 2012-05-07
I have a page ( that does a shed-load of API calls (google apis) and - therefore - parts of it take an eternity to load (almost 10 seconds) as some 20 google translation api calls are made).

The web page uses CSS grid ... and I 'insert' <cfinclude template=' ...> chunks of CFML for each section of the page as needed.

I'm kinda self-taught on this - so besides the ugly code - this may seem obvious, but not to me.

My CSS grid ... loads template "google language" first ... within css grid div on top of page ... (10 seconds to process)

THEN it loads another template "headlines with silly carousel images" (very quick to load) next ... and other fun fluff later (to be built) - BELOW the SLOW translation code (the 10 second stuff)

I'd like all the CFlocation easy stuff to load FIRST (at div's all around the page {above and below the <div translation section} ... and display 'PLEASE WAIT' (or even a countdown!?!?) whilst the translation work is processed.

Any ideas?

A shed load.

Open in new window

Question by:rcbuchanan
  • 3
  • 2
LVL 27

Accepted Solution

azadisaryev earned 500 total points
ID: 24433627
any CFML code you have is processed by cf server BEFORE it is sent to the web server. non-CFML (html, javascript, etc) code is processed by your web server (or by another corresponding application server like php etc). THEN it is sent to the user's browser.

so your code (which you have not posted any of - "A shed load." is surely not all of your code in tat page) which is NOT cfml code will be processed by the web server- it has nothing to do with CF.

one technique that i use with jquery and external code is:
use $.getScript() jquery function to load the external script AFTER the page is rendered. this function has an optional argument you can define a callback function to execute after the external script is loaded - you can use it to call a function that renderes the translated text etc etc etc.

meanwhile, on pageload (and before the external script is loaded) you can set the html of the element where you display translated text (or whatever the outcome of exterant script and callback function is) to show a 'loading' text/anmated .gif image, then, after the script is loaded and your callback function finished processing whatever it needed to processs, replace the html of the element with actual text/html you want to show there.

if you are not too familiar with jQuery's ajax utilities like S.getScript, you might want to look up jquery reference guide:
(strongly suggest you download the jQuery API AIR application! click on the 'install now' image on the page linked above)


Author Comment

ID: 24433873
So forgive if I'm slow to the mark on this ...

when you go to ... the browser pauses (showing previous page [i.e. ... for some 15 (yikes!) seconds, THEN it loads ALL of in one swoop.

SO; per your kind info above ... the 15 seconds of CF grabbing google translated api data [based on visitor's location/language], inserting into temp table ... is all done BEFORE the browser even slightly starts to process the 'currently ugly-styled' web page.


If I did a <cfflush> after my header stuff (the menu bar etc) ... would this send / process any HTML up to the point in the page where CFFLUSH is located?

IF SO. ... could I 'simply' insert a jquery BlockUI Plugin call in the HTML/javascript part just BEFORE the <cfflush code ...  to display 'wait' message and then do the jquery call at bottom of html/javascripted page to remove 'wait' message?

In other words ... would <CFFLUSH send any HTML/Jscript to the browser before the -pre-HUGE-CF-api-calls- section of CF code- begins?

Forgive is really dumb question.


Author Comment

ID: 24436796
never mind.
LVL 27

Expert Comment

ID: 24437538
just want to follow up on this a bit:

>> the 15 seconds of CF grabbing google translated api data [based on visitor's location/language], inserting into temp table ...

CF does not grab that or anything else. as i said before, CF only processes CFML code - everything else in your page it does not even see, and passes all that along to the web server (IIS or Apache or whichever one you are running).  

to actually test what is holding up your page so much, you need to separate cfml from the rest of the code (html, javascript, etc) and then see which part of the code is the bottleneck. it could very well be that your queries are not optimized and it takes your db a long time to send the data back to cf, making cf wait all that time...

there are various techniques and tools to help you figure out where the bottleneck is - placing tick counters in your code in various locations, using server monitoring tools, using Firebug and Yslow just to name a few.
however, the usual suspect in any super-slow processing is the database... so start by putting queries that you run in your page into a separate page and timing them to see if any of them is underperforming. tyhen add the cfml code that outputs the query results to the page and see how much that increases processing time...

>> If I did a <cfflush> after my header stuff (the menu bar etc) ... would this send / process any HTML up to the point in the page where CFFLUSH is located?

yes, cfflush will send any so-far processed code, including html and all, to the web server, which will show it in the browser.

>> could I 'simply' insert a jquery BlockUI Plugin call in the HTML/javascript part just BEFORE the <cfflush code ...

i have not tried this, but technically that should work, provided all necessary js scripts are loaded as well...

you could also put any long-running processes into a separate page (i.e. your queries and their generated output), and then use an ajax call to that page after your main page loads and populate a designated container with the result of the ajax call... jquery makes it very easu with $.get().

hope this helps.


Author Comment

ID: 24440114
Thank you.

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Coldfusion cfc script file to cfc with cffunction help 5 29
Javascript Form Change 5 31
Ahax pagination 9 33
Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question