Run ajax while main page is loading

Question

I got this php script that generates reports that take 20 to 30 seconds to complete. I would like to add a progress bar, and I have the progress updating in my DB correctly.

The problem is that I can't use jQuery to $.post or $.get while the main page is sitting there loading the report.

I can run javascript, like popup a window that says "please wait" and show a little spinning icon, but firefox refuses to send ajax post/get while the main page is loading.

Any way around this? I tried throwing it all in an iframe but that didn't work ether. (I'm monitoring the traffic using firebug and http live headers.)

Answer 1

You can have jQuery load in the report once your page has loaded, for example:

$(document).ready(function() {
    $('#someDiv').html('<strong>Loading...</strong>')
                 .load('report.html');
});

For a progress bar, check out jQuery UI Progressbar. That said, the manual makes this sound point:

if the actual percent complete status cannot be calculated, an indeterminate progress bar (coming soon) or spinner animation is a better way to provide user feedback.

so if that's the case I would recommend an animated spinner image or such with an appropriate message, for example:

$(document).ready(function() {
    $('#someDiv').html('<img src="images/spinner.gif"/><strong>This could take a while...</strong>')
                 .load('report.html');
});

Answer 2

You might want to consider elementReady. If you make sure your jquery script loads and a portion of your page are written out before the time consuming report begins to process you can use elementReady to kick off some kind of notification. There is no need to wait for the entire document to be ready.

I'm not sure if this will work with the ui progress bar, but I have used it with thickbox to grey-out and block input to the screen until the page has completely loaded and the thickbox throbber .gif works well enough as an activity indicator.

Answer 3

To add AJAX page loading animation effect: Step 1: Add jQuery Library

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

Step 2: Add some CSS to give cool appearance (optional) Step 3: Add following jQuery

<script>

(function($){

$("html").removeClass("v2");

$("#header").ready(function(){ $("#progress-bar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){ $("#progress-bar").stop().animate({ width: "75%" },1500) });

$(window).load(function(){

    $("#progress-bar").stop().animate({ width: "100%" },600,function(){
$("#loading").fadeOut("fast",function(){ $(this).remove(); });
});

});
})(jQuery);
</script> 

Step 4: finally, Add html code, wherever you want.