Javascript Chrome AJAX页面加载导致;忙光标“;留

Javascript Chrome AJAX页面加载导致;忙光标“;留,javascript,jquery,ajax,google-chrome,loading,Javascript,Jquery,Ajax,Google Chrome,Loading,在Google Chrome中,AJAX在$(function(){…})内调用;似乎保持页面加载 我有一个网站,有几个带标签的页面。因为我使用的是便宜的godaddy主机,所以我希望页面加载速度尽可能快。因此,我希望在1个选项卡上加载一个页面,然后在后台使用AJAX加载其他选项卡。当我从 $(function(){ /*AJAX CODE HERE */ }); 光标显示页面已加载很长时间() 我已经找到了一种方法(至少在chrome中)使用setTimeout()来解决这个问题()

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

我有一个网站,有几个带标签的页面。因为我使用的是便宜的godaddy主机,所以我希望页面加载速度尽可能快。因此,我希望在1个选项卡上加载一个页面,然后在后台使用AJAX加载其他选项卡。当我从

$(function(){
    /*AJAX CODE HERE */
});
光标显示页面已加载很长时间()

我已经找到了一种方法(至少在chrome中)使用
setTimeout()来解决这个问题(),但这只有在正确预测窗口何时完成完全加载并明显延长加载时间的情况下才有效。我想要一种在页面加载后立即通过AJAX加载内容的方法,这样在等待返回的AJAX时就不会显示“忙碌的光标”。

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


更新 要解决Chrome中的指针问题,可以设置光标样式,如中所示。这是一个有点黑客,它没有解决的问题,加载指标在顶部的标签


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

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

因此,不是:

$(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);
});

只要服务器没有新的查询,谷歌浏览器就会显示加载指示器。当加载指示器显示时,所有新请求都会导致Chrome延长指示器显示的时间。此外,当在指示灯显示时按下
esc
时,所有请求都将中止!这些包括AJAX请求,甚至Flash请求!看看:我以为这是因为Youtube,但这变成了Chrome的惯常行为

避免“延长”加载指示器显示时间的唯一方法是在加载指示器隐藏后发出请求,即在完成对服务器的所有查询时。在
.load()
上显示:

加载事件在元素和所有子元素完全加载后发送给元素。此事件可以发送到与URL关联的任何元素:图像、脚本、帧、iFrame和窗口对象

因此,如果您确定页面上只有图像、脚本和框架,
window.load()
将在您需要时启动。将
setTimeout()
添加到它中,将按您的喜好工作。以下是一个例子:

如果在您的请求之前有其他请求,您应该等待它们完成!例如,您知道,除了图像/脚本等,在页面加载之前还有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的理想行为,因为它表明它实际上还没有完成加载。我想说的是,Firefox没有指出它仍在等待脚本回调完成,这实际上是错误的

这可能是个人喜好的问题(我喜欢浏览器表明它正在等待/工作,即使它使我的浏览器看起来很慢),在这种情况下,成功地“修复”这个“问题”,将使浏览器不以用户习惯的方式运行。在web开发中,你真的不应该试图强迫浏览器以一种特定的方式运行,而这种方式对于webapp的工作方式来说并不是必不可少的,因为你很可能最终将一个你习惯的操作系统的外观强制到另一个具有不同感觉的操作系统中,从而使另一个操作系统的用户感觉更陌生(即使这会让你觉得网站更像你自己)


不管怎样,忙碌的游标不是问题,因为已经加载的元素仍然是响应的。

例如,根据JQuery文档,在准备就绪之前不应该运行javascript

$(document).ready(function() {someCode();});
考虑到这一点,我更改了您的(加载需要一些时间,但它可以工作)


编辑:hadnt forked jsfiddle>看起来这是一个Chrome问题,他们没有解决它:

还有另一种吗?看看我的jsfiddles代码。如果我做了错误的AJAX调用,尽管我不知道为什么会出现这些东西。FWIW它在FF4和IE9中工作得很好。如果
setTimeout
技巧在Chrome中解决了它,那么我会说去做。我不确定Chrome为什么选择这种行为:例如,它是故意的还是副作用?(AJAX/XHR可以同步运行,但不在该示例中。)请使用window.load而不是document ready重新测试我下面的答案。我相信它现在可以工作了。我没有看到任何问题
$(document).ready(function() {someCode();});