页面加载时Chrome AJAX会导致“忙碌光标”保留

在Google Chrome中,AJAX在$(function(){….})内调用; 似乎保持页面加载。

我有一个带有标签页面的网站。 因为我使用廉价的godaddy托管,我希望页面加载尽可能快。 因此,我想在1个选项卡上加载页面,然后在后台使用AJAX加载其他选项卡。 当我从中运行AJAX时

$(function(){ /*AJAX CODE HERE */ }); 

光标显示页面长时间加载( http://jsfiddle.net/mazlix/7fDYE/9/ )

我已经找到了一种方法(在chrome至少中)使用setTimeout();来解决这个问题setTimeout(); ( http://jsfiddle.net/mazlix/7fDYE/8/ ),但只有在您正确预测窗口何时完全加载并且显然需要更长时间才能加载时,此function才有效。 我想要一种在页面加载后立即通过AJAX加载内容的方法,因此在等待返回的AJAX时不会显示“busy-cursor”。

只要没有对服务器的新查询,Google Chrome就会显示“加载指标”。 显示加载指示符时,所有新请求都会导致Chrome延长指示符显示的时间。 此外,当显示指示符时按下esc ,所有请求都将中止! 这些包括AJAX请求甚至Flash请求! 看看这个问题 :我认为这是因为Youtube,但它变成了Chrome的惯常行为。

避免“延长”加载指示器的时间的唯一方法是在加载指示器被隐藏之后进行请求:即,当完成对服务器的所有查询时。 JQuery关于.load() 的文档说:

当load和所有子元素已完全加载时,load事件将发送到元素。 此事件可以发送到与URL关联的任何元素:图像,脚本,框架,iframe和窗口对象。

因此,如果您确定页面上只有图像,脚本和框架, window.load()将在您需要时触发。 将setTimeout()添加到它可以正常工作。 这是一个例子: http : //jsfiddle.net/7fDYE/22/

如果在您的请求之前有其他请求,您应该等待它们完成! 例如,您知道除了图像/脚本等之外,在页面加载之前还有3个AJAX请求。 你可以这样:

 var loaded=0,needsToBeLoaded=4; //3 AJAX + window function onLoad(){ loaded++; if(loaded==needsToBeLoaded){ //do the AJAX request } } window.load(onLoad); // add onLoad() to all 3 AJAX request handlers 

我不确定你可以用Flash请求做什么…

更新

此解决方案不适用于Chrome。 仅当窗口加载之前发出的所有请求都已完成时,它才会停止加载指示器。 唯一的解决方案似乎是让它在窗口加载后发出请求,但据我所知,这只能用于setTimeout,这不是很好。


更新

要解决Chrome中的指针问题,您可以设置光标样式, 如此小提琴中所示。 它有点hacky并没有解决选项卡顶部的加载指示器的问题。


加载指示符将出现在浏览器中,直到页面加载(窗口的加载事件)。 在$(function(){someCode();});someCode在触发DOM加载事件时执行(当所有内容在页面加载之前被解析并插入DOM时)。 此时JavaScript的执行会阻止窗口的加载事件触发,因此可以防止加载指示器停止。 请注意,图像加载也会阻止窗口的加载事件。

相反,你可以尝试$(window).load(function(){someCode();}); 。 在此示例中, someCode在触发窗口的load事件时执行。 这是浏览器的加载指示器停止的时刻。

所以,而不是:

 $(function(){ /*AJAX CODE HERE */ }); 

尝试:

 $(window).load(function(){ /*AJAX CODE HERE */ }); 

请注意,这可能会导致您的JavaScript稍后开始执行,这可能是不可取的。

有一个超级简单,万无一失的解决方案:

将您的函数包装在setTimeout调用中,并使用0的间隔。这将对要立即调用的函数进行排队,但在考虑页面“完成”之前,Chrome将不再等待它加载。 您不需要对页面何时完成进行任何猜测,只需确保在jquery Ready处理程序中调用setTimeout,如下所示:

 $(window).load(function() { setTimeout(function() { $("#result").html(ajax_load); $.post("/echo/json/", {json: json1, delay: 10000}, show_json, "json"); }, 0); }); 

根据JQuery文档,没有javascript应该运行,直到准备好为例

 $(document).ready(function() {someCode();}); 

考虑到这一点,我改变了你的jsFiddle (它需要一些时间加载,但它的工作原理)

编辑:hadnt forked jsfiddle> <

我不确定我是否同意这是一个问题。 我会说这是一个来自chrome的理想行为,因为它表明它实际上没有完成加载。 我会说Firefox实际上是不正确的,没有表明它仍在等待脚本回调完成。

这可能是个人品味的问题(我喜欢浏览器表明它正在等待/工作,即使它让我的浏览器看起来很慢),在这种情况下成功“修复”这个“问题”,会使浏览器不能表现以用户习惯的方式。 在Web开发中,您实际上不应该试图强制浏览器以特定的方式运行,这对于webapp的工作方式并不重要,因为您可能最终会使用您使用的一个操作系统强制执行外观进入另一个具有不同感觉的操作系统,使其对另一个操作系统的用户感觉更加陌生(即使它让网站感觉更加原生)。

繁忙的光标无论如何都不是问题,因为已经加载的元素仍然是响应的。