javascript - 如何设置页面之间转换的加载图标？

Question

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

在我的所有 php 文件中，我都有上面提到的用于显示加载图标直到页面加载的代码。例如:如果我执行index.php，加载图标将显示，直到index.php完全加载。如果它被重定向到example.php 重定向时，不显示加载图标，完全空白。如果完全重定向，则会显示加载图标，直到该页面完全加载。

预期: 当重定向到下一页时，同时我也需要显示加载图标。

那么如何在页面转换之间显示加载图标呢？

Answer 1

诀窍是在页面卸载时立即启动加载图标。那么当新页面加载时，加载图标必须立即再次显示，只有当新页面完全加载时才能隐藏图标。

// 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();
});