每当浏览器加载图标处于活动状态时显示加载图标

Posted 2023-03-05

【中文标题】每当浏览器加载图标处于活动状态时显示加载图标

【英文标题】：Show loading icon whenever the browser loading icon is active

【发布时间】：2013-09-10 14:54:50

【问题描述】：

这可能有点牵强，但我想知道这是否可能。

我正在开发一个使用 php 作为其后端的网站。问题是，我正在运行的一些 PHP 脚本非常冗长，并且可以转换为可能持续几秒钟的页面加载时间。

理想情况下，我可以在页面加载时显示加载图标，但情况因页面而异：

在某些情况下，页面是第一次加载， 在其他情况下，页面会在提交同页表单后重新加载， 有时表单由页外脚本处理，然后重定向回表单所在的页面（在这些情况下，由于没有在外部脚本中回显用户不知道脚本正在其他地方处理，因为页面内容没有改变）。

我了解在每种情况下都可能显示加载图标，具体取决于触发器，但找不到在页面简单加载时显示图标的通用解决方案（无论触发器如何）。

我注意到某些浏览器在页面加载时会在网站图标的位置显示加载图标（或者，至少 Google Chrome 会显示）。是否可以知道浏览器加载图标何时处于活动状态并同时显示页面加载图标？

如果没有，任何替代解决方案将不胜感激。

【问题讨论】：

您知道页面何时加载、重新加载、处理，以便您可以设置加载动画并在完成后将其移除？

您可以始终在页面中显示加载图标。并使用window.onload 删除它。

我的问题不在于为每个案例创建解决方案，而在于我寻找通用解决方案:)

【参考方案1】：

缓冲

如果您的 PHP 脚本导致加载缓慢，您必须将它们放入缓冲区。因此，加载完成后，您可以释放此缓冲区。

这并不难实现。

请参见 PHP 输出缓冲控制文档： PHP Output Buffering Control

缓冲区加载完毕

你可以这样： http://jsfiddle.net/S9uR9/

    $(window).load(function () 
        //hideLoading();
    );

    hideLoading = function() 
        $('.loading').fadeOut(2000, function() 
            $(".content").fadeIn(1000);        
        );
    ;

    hideLoading();

在您的页面中，尝试删除 $(window).load() 函数中的注释行并注释最后一行 hideLoading();。

检测浏览器的活动

我注意到，有些浏览器在页面加载时会在网站图标的位置显示加载图标（或者至少 Google Chrome 会显示）。是否可以知道浏览器加载图标何时处于活动状态并同时显示页面加载图标？

您可以尝试另一种选择。您可以检测网络活动。这实现起来更复杂，但更有趣，主要是如果您想要一种移动方法。

See this article，可以帮忙。

【讨论】：

如果只是等待页面内容加载的简单问题，这将起到作用，但在我的情况下，延迟是由在内容本身尝试加载之前执行的 PHP 脚本引起的。

PHP 输出缓冲控制。请参阅此答案的版本。