javascript - History Api：如何告诉浏览器页面正在加载？

Question

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

编辑：

更加具体：

如果我在我的网站上加载一个页面，则 url 会更改，会显示新内容，但 Firefox 不会将旋转轮显示为页面正在加载的信号。

如果我从 Facebook 的时间线上打开一张图片，图片正在加载，url 发生变化，Firefox 显示旋转轮显示，图片正在后台加载。

我也想要那个纺车！

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

该脚本创建一个 iframe，由 ajax.start 和 ajax.stop-event 触发。

Answer 2

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

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

接着：

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

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

Answer 3

我从标签中假设您正在为您的 AJAX 使用 jQuery。您可以使用全局 AJAX 处理程序，无论您在代码中的何处调用 ajax 方法$.ajaxStart()，这些都会触发$.ajaxComplete()

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

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

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

我认为根据您的问题措辞，您希望能够控制实际浏览器选项卡本身的加载图像。你无法控制它。在页面内使用您自己的图像或文本对用户来说也更明显

编辑您必须在元素中提供您自己的加载动画id=myLoadingDiv才能使此代码正常工作