Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium


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

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Question has a verified solution.

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

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
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…
Suggested Courses

564 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