历史记录API：如何告诉浏览器页面正在加载？

Question

我一直在使用历史记录API，同时通过javascript/jquery异步加载页面。我想知道如何告诉浏览器网站正在加载，以便浏览器可以显示一个加载图片（例如火狐浏览器中的旋转轮）。

编辑:

更具体地说:

如果我在我的网站上加载一个页面，URL会改变，新内容会显示出来，但是Firefox不会显示旋转轮作为信号，表示页面正在加载。

如果我在Facebook的时间轴中打开一张图片，图像正在加载，URL会改变，Firefox会显示旋转轮以显示图像正在后台加载。

我也想要那个旋转轮!

- Olli

Answer 1

我在这些问题中找到了答案：

如何让AJAX触发浏览器的加载

var i = $('<iframe>');
console.log(i);
i.appendTo('body');
function start() {
    i[0].contentDocument.open();
    setTimeout(function() {
        stop();
    }, 1000);
}
function stop() {
    i[0].contentDocument.close();
    setTimeout(function() {
        start();
    }, 1000);
}

start();

来源: jsFiddle

- Olli

Answer 2

好的，异步请求知道正在加载某些内容。你只需要自己将事件传递到其他地方。例如，使用beforeSend钩子：

$.ajax('/your_stuff', 
       beforeSend: function() {
         $(document).trigger('loading');
       }
       ....)

然后：

$(document).on('loading', function() { alert("request is loading");}

我建议您在使用历史记录 API 更新 URL 的同时触发事件。

- ChuckE

---

这个脚本会显示一个警告框。但是我希望浏览器自己显示页面正在加载的状态。 - Olli

你的问题表述有点不太准确。如果我理解正确，你想知道如何更新网站图标以模拟在进行 AJAX 请求时的“加载”状态。 - ChuckE

请参考此链接 https://gist.github.com/428626 。这可能会有所帮助。现在你只需要知道“加载”图标存储在哪里，因为它在不同的浏览器中可能不同。因此，你要么让一个图标在所有情况下都有效，要么在更新之前检测浏览器并找到其位置。 - ChuckE

是的，但我不知道它是否真的是一个“模拟”。这不仅涉及网站图标，中止按钮也是活动的。 - Olli

据我所知，浏览器无法操作被触发的 AJAX 请求，只能操作“普通”的 HTTP 请求。这意味着浏览器无法对 AJAX 请求产生影响，除非它启动一个新的 HTTP 请求，从而阻止当前正在运行的 AJAX 请求。但也许有人知道得更好，并且可以正确回答这个问题。 - ChuckE

Answer 3

从标签中我猜你正在使用jQuery进行AJAX。你可以使用全局的AJAX处理程序，如$.ajaxStart()和$.ajaxComplete()。无论你在代码中的哪个位置调用ajax方法，它们都会触发。

$('#myLoadingDiv').ajaxStart(toggleLoading).ajaxComplete(toggleLoading);

function toggleLoading(){
   $(this).toggle();
}

API 参考 http://api.jquery.com/ajaxStart/

从你的问题措辞来看，我认为你想要能够控制实际浏览器标签上的加载图像。你无法控制它。在页面内使用自己的图像或文本也更容易被用户看到。

编辑：为使此代码起作用，您必须在具有 id=myLoadingDiv 的元素中提供自己的加载动画。

- charlietfl

---

这个脚本会显示一个警告框。但是我希望浏览器自己显示页面正在加载。 - Olli

请解释一下“浏览器本身显示页面正在加载”的含义。而且这不是一个警报框...它可以放置在页面的任何位置，您可以以任何想要的方式对其进行动画处理。 - charlietfl

哦，抱歉，这个注释是指其他答案，而不是你的。我测试了你的脚本，但在火狐浏览器中没有出现“旋转圆圈”。我已编辑我的问题并加入更多解释。 - Olli

你是指浏览器标签上的旋转器，就像我在上一个答案中所说的吗？另外...你知道如何找到自己的动画加载GIF吗？ - charlietfl

是的。但是Firefox中的中止按钮怎么样？在Facebook上打开图片会触发选项卡中的旋转轮和中止按钮。 - Olli

它不也是在加载新的URL吗？当页面正在加载时，选项卡上的旋转器会激活。 - charlietfl