Question

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

编辑：

更具体一点：

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

如果我在Facebook的时间轴上打开图片，图片正在加载，网址会更改，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＆amp;触发。 ajax.stop事件。

Answer 2

嗯，异步请求知道正在加载的东西。你只需要自己在其他地方宣传这个活动。例如，使用beforeSend钩子：

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

然后：

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

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

Answer 3

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

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

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

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

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

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

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

3 个答案: