Question

在Google Chrome中，AJAX在$（function（）{....}）内调用;似乎保持页面加载。

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

运行AJAX时

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

光标将页面显示为长时间加载（http://jsfiddle.net/mazlix/7fDYE/9/）

我已经找到了一种方法（至少使用chrome）来使用setTimeout();（http://jsfiddle.net/mazlix/7fDYE/8/）进行某种程度的修复，但这只有在你正确预测窗口何时完全加载并且显然是加载时间更长。我希望在页面加载后立即通过AJAX加载内容，因此在等待返回的AJAX时不会显示“busy-cursor”。

Answer 1

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

避免“延长”加载指示器的时间的唯一方法是在加载指示器隐藏后发出请求：即，当完成对服务器的所有查询时。 .load()上的JQuery's documentation说：

当加载事件和所有子元素已完全加载时，会将事件发送到元素。此事件可以发送到与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请求做什么......

Answer 2

更新

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

更新

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

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

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

所以，而不是：

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

尝试：

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

请注意，这可能会导致您的JavaScript稍后开始执行，这可能并不理想。

Answer 3

有一个超级简单，万无一失的解决方案：

将您的函数包装在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);
});

Answer 4

根据JQuery文档，在准备好之前不应该运行javascript

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

考虑到这一点我改变了你的jsFiddle（加载需要一些时间，但它有效）

编辑：没有分叉jsfiddle＆gt;＆lt;

Answer 5

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

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

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

Answer 6

看起来这是一个Chrome问题，他们没有解决： https://bugs.chromium.org/p/chromium/issues/detail?id=26723

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

6 个答案:

更新

更新