如何设置页面之间的过渡加载图标？

Question

$(window).load(function() {
    $('#loading').hide();
    $('#container').show();
});

In all my php file, I have above mentioned code for displaying loading icon till the page loads. For example : If I execute index.php , loading icon will be shown till index.php gets fully loaded.If it is redirected to example.php when redirecting, no loading icon is displayed, its fully blank. And if it is redirected fully then loading icon is displayed till that page loads fully.

Expected: When redirecting to next page, in that meanwhile too I need loading icon to be displayed .

so How to display loading icon between the transition of pages?

Answer 1

The trick is to start the loading icon immediately when the page is unloaded. Then when the new page is loaded, the loading icon must be shown immediately again, only then when the new page is fully loaded the icon can be hidden.

// Show the icon immediatly when the script is called.
$('#loading').show();

// show the icon when the page is unloaded
$(window).on('beforeunload', function(event) {
  $('#loading').show();
});

// hide the icon when the page is fully loaded
$(window).on('load', function(event) {
  $('#loading').hide();
});