我们可以控制浏览器选项卡中的“加载”图标吗？

Question

我通过 jQuery 进行了一系列 AJAX 调用。当执行 ajax 调用时，没有视觉指示。通常，如果您单击链接或进行其他非 ajax 加载，浏览器会在选项卡中显示一个小加载图标。

有什么方法可以告诉浏览器在选项卡中显示这个小图标吗？ （这些调用大约有 30 个，所以我希望避免修改每个调用）。

Answer 1

不，你不能告诉浏览器这样的事情。

但是你可以做你自己的加载指示器。在标记中包含隐藏元素，然后使用

ajaxStart

和

ajaxStop

事件来控制其可见性：

$("#loading_animation").bind({
    ajaxStart: function() { $(this).show(); },
    ajaxStop: function() { $(this).hide(); }
});

当 ajax 请求在没有其他人运行的情况下启动时，

ajaxStart

由 jQuery 触发；

ajaxStop

当 ajax 请求完成且没有其他请求正在运行时会被触发。

Answer 2

没有。

但是你可以修改光标的css。

body {
   cursor:wait;
}

Answer 3

你绝对可以。请参阅这篇文章：动态更改网站图标

只需创建一个加载图形的动画图标，并在加载时将图标更改为该图标。

问题在于您没有与特定浏览器使用的完全相同的加载图形，但我认为该消息将被有效地传达。

Answer 4

在进入任何代码或任何内容之前，我只想说这是一个丑陋的解决方案，但它确实对我有用。

我所做的就是在网站上放置一个 iframe。然后我在 css 中使用 display: none 隐藏它。

然后，在每次 ajax 调用时，我都会使用新页面重新加载 iframe。这会导致浏览器在标签栏中显示正在加载。

我确实知道这不是一个完美的解决方案，并且存在一些缺陷。就像如果 iframe 的加载速度比 ajax 快的话，您无法控制加载的持续时间。但我只是把它扔在那里。也许其他人可以在这个概念的基础上进行构建。

Answer 5

这是一个替代方案。
在进行调用之前，您可以显示图像，然后在函数中（而不是在调用之后）再次隐藏它。

Answer 6

这实际上可以通过 Navigation API 使用本机功能（目前仅适用于 Chrome、Edge 和 Opera）：

function showLoading(promise) {
  navigation.addEventListener('navigate', evt => {
    evt.intercept({
      scroll: 'manual',
      handler => promise,
    });
  }, { once: true });
  return navigation.navigate(location.href).finished;
}

// show browser loading UI for 1.5s
showLoading(new Promise(r => setTimeout(r, 1500)));

灵感来自@jason-miller：https://mastodon.online/@[电子邮件受保护]/109865246685541843