Show loading icon whenever the browser loading icon is active - php

Question

This might be a stretch, but I'm wondering whether or not it might be possible.
I'm working on a website that uses PHP for its backend. The problem is, some of the PHP scripts I'm running are quite lengthy, and can translate into page load times that can last a few seconds.
Ideally, I would be able to display a loading icon whenever the page is being loaded, but the circumstances differ depending on the page:
In some cases, the page is being loaded for the first time,
In others, the page is being reloaded after a same-page form submit,
Sometimes the form is processed by an off-page script, which then redirects back to the page on which the form is situated (in these cases, since nothing is echoed in the external script the user isn't aware that the script is being processed elsewhere as the page content doesn't change).
I understand a loading icon could be displayed in each of these cases depending on the trigger, but cannot find a general solution that would display an icon whenever the page is simply loading (regardless of the trigger).
I've noticed that some browsers show a loading icon in the place of the favicon whenever the page is loading (or, at least, Google Chrome does). Is it be possible to know when the browser loading icon is active and display a page loading icon concurrently?
If not, any alternate solution would be much appreciated.

Answer 1

Buffering
Case your PHP scripts are causing a slow load you must put' em in buffer. So, when the load is finished you can free this buffer.
This isn't so hard to implement.
See the PHP output buffering control documentation for this:
PHP Output Buffering Control
Finished the loading of the buffer
You can make like this:
http://jsfiddle.net/S9uR9/
$(window).load(function () {
//hideLoading();
});
hideLoading = function() {
$('.loading').fadeOut(2000, function() {
$(".content").fadeIn(1000);
});
};
hideLoading();
In your page, try to remove the commented line in $(window).load() function and comment the last line hideLoading();.
Detecting browser’s activity
I've noticed that some browsers show a loading icon in the place of the favicon whenever the page is loading (or, at least, Google Chrome does). Is it be possible to know when the browser loading icon is active and display a page loading icon concurrently?
You can try another alternative. You can detect the network activity. This is more complex to implement, however more interesting, principally if you want a mobile approach.
See this article, can help.