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

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

编辑：

更具体地说：

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

如果我在Facebook上打开时间线中的图片，图像正在加载，url会发生变化，Firefox会显示旋转的轮子，以显示图像正在后台加载

---

我也想要那个纺车

嗯，异步请求知道有东西正在加载。您只需自己将事件传播到其他地方即可。例如，使用beforeSend钩子：

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

然后：

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

---

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

根据标记，我假设您正在使用jQuery实现AJAX。您可以使用全局AJAX处理程序，如

$.ajaxStart（）

和

$.ajaxComplete（）

，无论在代码中的何处调用AJAX方法，这些处理程序都将启动

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

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

API参考

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

---

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

我在以下问题中找到了答案：

var i=$（''）；
控制台日志（i）；
i、 附属于（“主体”）；
函数start（）{
i[0]。contentDocument.open（）；
setTimeout（函数（）{
停止（）；
}, 1000);
}
函数停止（）{
i[0].contentDocument.close（）；
setTimeout（函数（）{
start（）；
}, 1000);
}
start（）；

资料来源：

---

脚本创建一个iframe，由ajax.start&ajax.stop事件触发。

此脚本显示一个警报框。但是我想，浏览器本身显示，页面正在加载。请解释您所说的

浏览器本身显示，页面正在加载是什么意思。也不是一个警告框…可以是任何html放在任何地方的网页上，你想要的，你可以用任何方式动画它，对不起，这个评论是指其他答案-不是你的。我测试了你的脚本，但是firefox中的“旋转木马”没有出现。我编辑了我的问题，并作了进一步的解释。你是说浏览器选项卡上的微调器和我在回答中的最后一句话一样吗？也。。。你知道如何找到自己的动画加载GIF，是吗？是的。但是Firefox中的中止按钮呢？在facebook中打开图片会触发选项卡中的旋转滚轮和中止按钮。此脚本显示一个警报框。但是我想，浏览器本身显示，页面正在加载。那么，你把我们的问题表述得有点错误。如果我理解正确，您想知道如何在执行ajax请求时更新favicon以模拟“加载”状态。这可能对你有帮助。现在，您只需要知道“加载”图标存储在哪里，不同浏览器的图标可能不同。所以，你要么让它在你的案例中随处可见，要么你会通过浏览器找到位置并在更新之前“嗅探”浏览器。是的，但我不知道，它是否真的是“模拟”。这不仅仅是favicon的问题，中止按钮也是活动的。哼。。。据我所知，浏览器无法对被触发的AJAX请求进行操作，只能对“普通”HTTP请求进行操作。这意味着浏览器不能影响AJAX请求，除非它启动一个新的HTTP请求，从而阻止当前正在运行的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();