历史Api:如何告诉浏览器页面正在加载？

Question

当我通过javascript/ jquery异步加载页面时，我一直在使用历史api。我想知道如何才能告诉浏览器站点正在加载，这样浏览器就可以显示加载图片(就像firefox中的旋转轮一样)。

编辑：

更具体地说：

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

如果我在Facebook的时间线中打开一张图片，图片正在加载，url会改变，而Firefox会显示旋转的轮子，图片正在后台加载。

我也想要那个旋转轮子！

Answer 1

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

How to have AJAX trigger the browser's loading

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

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

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

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

接口参考http://api.jquery.com/ajaxStart/

我认为从您的问题措辞来看，您希望能够控制实际浏览器选项卡本身上的加载图像。这是你无法控制的。在页面中使用您自己的图像或文本对用户也更具可见性

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