2012-11-13 112 views
11

我一直在使用历史API,而我通过javascript/jquery异步加载页面。我想知道如何告诉浏览器该网站正在加载,以便浏览器可以显示加载图片(例如Firefox中的旋转轮)。历史Api:如何告诉浏览器页面正在加载?

编辑:

更具体:

如果我打开我的网站,网址的变化,页面中的新内容被显示,但Firefox不显示纺车作为信号,该页面正在加载。

如果我从Facebook的时间线上打开图片,图像正在加载,url更改并且Firefox显示要显示的旋转轮,图像正在后台加载。

我也想要那个旋转轮!

回答

1

那么,异步请求知道正在加载的东西。你只需要在其他地方传播事件。例如,使用beforeSend钩:

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

然后:

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

我劝你在同一时间更新与历史API您的网址触发事件。

+1

此脚本显示警告框。但我希望浏览器本身显示该页面正在加载。 – Olli

+0

然后你制定了我们的问题有点不对。如果我理解正确,您想知道如何更新favicon以模拟“加载”状态,同时执行ajax请求。 – ChuckE

+0

https://gist.github.com/428626这可能会帮助你。现在您只需要知道“加载”图标的存储位置,这可能会因浏览器而异。所以,你可以让你在任何地方工作,或者你可以通过浏览器找到位置,并在更新之前“浏览”浏览器。 – ChuckE

-1

我假设你正在使用jQuery为你的AJAX标签。您可以使用全局AJAX处理像$.ajaxStart()$.ajaxComplete()这些不管会火,你自己的代码中调用一个Ajax方法

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

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

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

我想从你的问题的措辞要能够控制实际浏览器选项卡本身的加载图像。你无法控制。使用您自己的图片或网页中的文字也是用户更可见

编辑你必须为这个编码提供自己的加载动画中的一个元素与id=myLoadingDiv工作

+0

此脚本显示一个警告框。但我希望浏览器本身显示该页面正在加载。 – Olli

+0

请解释你的意思是'浏览器本身显示,该页面正在加载'。此外,它不是一个警告框...可以是任何你想放在任何页面上的html,你可以用任何你想要的方式为它制作动画 – charlietfl

+0

哦,对不起,这个评论指的是其他答案 - 不是你的。我测试了你的脚本,但Firefox中的“旋转轮”没有出现。我编辑我的问题进一步解释。 – Olli

7

我发现这些问题的答案:

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事件触发。

+1

在Chrome中无效:-( – Frodik

相关问题