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.

Solution

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>