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

Question

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

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

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

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

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

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

How to set loading icon for transition between pages?

html

javascript

php

jquery

loading