当有人点击特定链接时如何显示加载对话框?

我有一个URL打开一个网页,加载速度很慢,我无法控制它。

我确实想要在有人点击此URL时显示加载对话框,或者在发生这种情况时阻止带有叠加div的页面。

注意:这与ajax相关的问题不同,这对于普通的URL点击形成了用户,而不仅仅是特定的点击。

slow load... 

我想我正在寻找的是onClick上的内容。

你可以这样做 :

 $(function(){​ $('a').click(function(){ $('
loading...
').prependTo(document.body); });​ });

演示 (将链接更改为非常慢的页面以获得最佳效果)

但这取决于页面:如果页面立即发送一些内容而不是整个内容,您将没有时间看到您的div。

如果你还需要动画,那么浏览器的行为会有很大不同,这就变得很复杂。 当新页面开始加载时,有些会停止所有GIF动画。 基本上,如果你有jQuery并下载spin.js库,它就归结为这样的东西。

在此查看工作方案

http://jsfiddle.net/7aJyP/

  
link

如果您使用动画(GIF),动画可能会在某些浏览器上冻结。 我使用了spin.js库( http://fgnass.github.com/spin.js/ )。 当GIF被冻结时,javascript动画似乎正在运行。

请测试所有浏览器!

虽然ajax会更优雅,但它是可能的。 您必须通过阻止默认事件来拦截导航,然后强制更新UI,然后将位置更改为目标URL。 像这样的东西:

 $('#mylink').click(function(e) { e.preventDefault(); var url = this.href; // Update the UI here setTimeout(function() { // This is a trick to force a repaint window.location.href = url; },0); }); 

据推测,您需要立即显示加载对话框,然后消失并在新页面呈现时被新页面替换?

想到了三个想法。


如果您可以控制源页面而不是目标 – 使用单击事件处理程序将标记的正常行为替换为如下所示:

  1. 显示加载动画
  2. 向标记的href属性定义的URL发出AJAX请求(或者,创建一个以URL作为源的隐藏)
  3. 请求完成后,将文档的内容替换为响应。

但是,这可能会变得非常毛茸茸,因为您不会丢失原始页面中定义的javascript和css。 它也不会更改用户浏览器中显示的URL。


如果您可以控制目标并且可以使目标可缓存(甚至几秒钟):您可以通过AJAX在后台加载页面,然后重定向到它。 第一次加载会很慢,然后重定向将从缓存加载页面。


还有另一种选择:如果您可以控制目标页面,则可以定义一个可选参数,这样如果参数存在,服务器将返回一个页面,该页面仅包含加载动画和一些加载实际页面的javascript。

最初将spinner.gif存储在表单中的某些位置,并将其隐藏起来并放入src =“”

因此图像没有src

但是稍后在进行ajax调用时,您可以为微调器图像设置src,这样您的页面似乎就会加载

 $(document).ready(function() { // bind 'myForm' and provide a simple callback function $("#tempForm").ajaxForm({ url:'url to be called', type:'post', beforeSend:function() { alert("this is the place where you place things to happen till your page is being transfered to the given URL so i am setting the src for the spinner image here"); $("#spinner image ID").attr("src","../images/spinner.gif"); }, success:function(e){ alert("do whatever you want with response here"); } }); }); 

您可以创建隐藏的iframe并侦听加载事件。 如果目的地已阻止x帧内容,您还需要在大约1秒后进行手动检查。

演示: http : //jsbin.com/ijofih/1

 $('a').click(function(e) { $(this).text('Loading...'); // do your UI thing here e.preventDefault(); var destination = this.href; setTimeout(function() { window.location = destination; },1000); $(' 

您可能想要查看模态框。 您可以在发送ajax请求时激活模型框,并且成功时可以关闭它。 https://www.google.com/search?sugexp=chrome,mod=10&sourceid=chrome&ie=UTF-8&q=modal+box