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

Posted on 2009-05-20
Medium Priority
Last Modified: 2012-05-07
I have a page (www.heaped.com) 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 1500 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. www.heaped.com" 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: http://api.jquery.com/
(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 heaped.com ... the browser pauses (showing previous page [i.e. google.com) ... for some 15 (yikes!) seconds, THEN it loads ALL of heaped.com 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: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

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.

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

569 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