Question 230888 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Display loading image while loading Coldfusion page

There are many solutions to display a loading image while a web page is loading. However, when I inserted Coldfusion codes, it stopped working. I found one set of codes using javascript:

These are in the HEAD section of calculate.cfm:

CSS

.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(preloader_3.gif) center no-repeat #fff;
}

Javascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>
<script>
    //paste this code under head tag or in a seperate js file.
    // Wait for window load
    $(window).load(function() {
        // Animate loader off screen
        $(".se-pre-con").fadeOut("slow");;
    });
</script>

Then with this in the BODY section.

<body>
<div class="se-pre-con"></div>
Display the web page content
</body>

The loading image works perfectly. It displayed the loading image then the text "Display the web page content".

However, when I inserted the Coldfusion codes in the same spot, which process sets of numbers and requires approximately 15 seconds before the results can be displayed:

<body>
<div class="se-pre-con"></div>
<cfset totalset = 0>
<cfloop condition = "totalset lt 10">
     Do calculations until getting 10 sets of numbers
</cfloop>
<div align="center">
     Display 10 sets of numbers
</div>
</body>

The result is a blank page being shown for 14 seconds.  Then the loading image is displayed for one second, and right after that, the 10 sets of numbers get displayed.

This basically defeats the purpose of having a "loading image" because that loading image is not displayed at the very beginning.  But rather, it got displayed just before the sets of numbers were ready to be displayed.

Is there any way to display the loading image as soon as the web page is called before Coldfusion process and display the numbers?

Thanks in advance.

UPDATE:

The above program calculate.cfm is called by another program start.cfm which has the code

        <form action="calculate.cfm" method="post" onsubmit="popup(this)">
    <input type="hidden" name="num" value="#num#">
    .
    .
        <input type="submit" name="action" value="Calculate">
        </form>

    <script>
    function popup(form) {
        var iMyWidth;
        var iMyHeight;
        //half the screen width minus half the new window width (plus 5 pixel borders).
        iMyWidth = (window.screen.width/2) - (75 + 10);
        //half the screen height minus half the new window height (plus title and status bars).
        iMyHeight = (window.screen.height/2) - (100 + 50);
        //Open the window.
        var win2 = window.open("","mypopup","status=no,height=400,width=475,resizable=yes,left=" + iMyWidth + ",top=" + iMyHeight + ",screenX=" + iMyWidth + ",screenY=" + iMyHeight + ",toolbar=no,menubar=no,scrollbars=yes,location=no,directories=no");
        win2.focus();
        form.target = 'mypopup';
    }
</script>

Not sure if this will help in displaying the loading image.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Finally got it to work by placing cfheader

    <cfheader name="X-Accel-Buffering" value="no">

    at the top of the page and cfflush after the loading image

    <div class="se-pre-con"></div>    
<cfflush>

  2. 0

    The technique you are using is very common when using javascript frameworks, where content is loaded after a first hit for a entry page.

    What is happening in your case is a very normal and common behaviour with dynamic web pages, and that is also what I’d expect to happen. Any other page with dynamic inserted content in any other language (with some exception) would just behave the same, unless you make it work differently. Your first example page just does the job properly because it’s static (everything gets fully loaded at once).

    One solution that might work for could be adding cfflush right after <div class="se-pre-con"></div> like so:

        <body>
        <div class="se-pre-con"></div>
        <cfflush />
        <cfset totalset = 0>
        <cfloop condition = "totalset lt 10">
             Do calculations until getting 10 sets of numbers
        </cfloop>
        <div align="center">
             Display 10 sets of numbers
        </div>
    </body>

    That would force the cfml engine to send the already generated output to the browser. But watch out for other issues you might have regarding cfflush: If you are fronting the cfml engine with a web server, you might need to configure it properly to make that work (e.g. see this issue)
    Another option would be to move the cfml code outside to a second page and load that with ajax and async, and hide the div after that content has been added to the first page.

    Find below a full working cfml template that I’ve tested directly on Lucee Express Lucee 6.0.0.495-SNAPSHOT on port 8888 and Adobe ColdFusion default instance with CommandBox box server start cfengine=adobe. I’ve no time to look at your code in detail, but this example should help as a start:

    <!doctype html>
<html>
  <head>
    <title>cfflush example</title>
    <style>
      .se-pre-con {
         animation: blinking 1s linear infinite;
       }
  
       @keyframes blinking {
         50% {
          opacity: 0;
         }
       }
    </style>
  </head>
  <body>
        <div class="se-pre-con" style="text-align:center;">LOADING...</div>
        <cfflush />
        <cfset totalset = 0>
        <cfloop condition = "totalset lt 10">
            <cfscript>
            sleep( 1000 );
            </cfscript> 
            <cfset totalset++>
        </cfloop>
        <div align="center">
             Display 10 sets of numbers
        </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>
    <script>
        $(window).load(function() {
            // Animate loader off screen
            $(".se-pre-con").fadeOut("slow");;
        });
    </script>
 
 </body>
</html>

    If it doesn’t work on your Apache2 or Ngnix, you need to dig into your webservers settings, e.g. deactivating compression or similar.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search