Chrome 的加载指示器在 XMLHttpRequest 期间不断旋转

发布于 2024-08-30 14:53:16 字数 752 浏览 8 评论 0原文

我正在编写一个 AJAX Web 应用程序，它使用 Comet/Long Polling 来保持网页最新，我注意到在 Chrome 中，它将页面视为始终加载（选项卡的图标不断旋转）。

我认为这对于 Google Chrome + Ajax 来说是正常的，因为甚至 Google Wave 也有这种行为。

今天我注意到 Google Wave 不再保持加载图标旋转，有人知道他们是如何解决这个问题的吗？

这是我的ajax调用代码

var xmlHttpReq = false;
// Mozilla/Safari
if (window.XMLHttpRequest) {
   xmlHttpReq = new XMLHttpRequest();
}
// IE
else if (window.ActiveXObject) {
   xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttpReq.open('GET', myURL, true);
xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttpReq.onreadystatechange = function() {
   if (xmlHttpReq.readyState == 4) {
      updatePage(xmlHttpReq.responseText);
   }
}
xmlHttpReq.send(null);

原文

I'm writing an AJAX web app that uses Comet/Long Polling to keep the web page up to date, and I noticed in Chrome, it treats the page as if it's always loading (icon for the tab keeps spinning).

I thought this was normal for Google Chrome + Ajax because even Google Wave had this behaviour.

Well today I noticed that Google Wave no longer keeps the loading icon spinning, anyone know how they fixed this?

Here's my ajax call code

var xmlHttpReq = false;
// Mozilla/Safari
if (window.XMLHttpRequest) {
   xmlHttpReq = new XMLHttpRequest();
}
// IE
else if (window.ActiveXObject) {
   xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttpReq.open('GET', myURL, true);
xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttpReq.onreadystatechange = function() {
   if (xmlHttpReq.readyState == 4) {
      updatePage(xmlHttpReq.responseText);
   }
}
xmlHttpReq.send(null);

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

追我者格杀勿论 2024-09-06 14:53:16

我无耻地偷了Oleg的测试用例并稍微调整了一下以模拟长轮询。

load.html:

<!DOCTYPE html>
<head>
  <title>Demonstration of the jQery.load problem</title>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  jQuery(document).ready(function() {
    $('#main').load("test.php");
  });
  </script>
</head>
<body>
  <div id='main'></div>
</body>
</html>

test.php：

<?php
  sleep(5);
?>
<b>OK!</b>

结果很有趣：在 Firefox 和 Opera 中，在 XMLHTTPRequests 期间不会显示加载指示符。 Chrome 让它旋转...我怀疑 Google Wave 不再使用长轮询（但是，例如，每 X 秒轮询一次，以节省资源），但我无法测试它，因为我没有帐户。

编辑：我发现：在加载test.php时添加一点延迟（可以尽可能小）后，加载指示器在加载后停止.html 已加载：

jQuery(document).ready(function() {
  setTimeout(function () {
    $('#main').load("test.php");
  }, 0);
});

不知何故，在另一个答案的评论中确认，当浏览器重新获得控制权以完成页面渲染时，指示器停止旋转。另一个优点是不能通过按 Esc 中止请求。

I shamelessly stole Oleg's test case and adjusted it a bit to simulate long-polling.

load.html:

<!DOCTYPE html>
<head>
  <title>Demonstration of the jQery.load problem</title>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  jQuery(document).ready(function() {
    $('#main').load("test.php");
  });
  </script>
</head>
<body>
  <div id='main'></div>
</body>
</html>

test.php:

<?php
  sleep(5);
?>
<b>OK!</b>

The result is interesting: in Firefox and Opera, no loading indicator is shown during XMLHTTPRequests. Chrome lets it spinning... I suspect Google Wave doesn't use long polling anymore (but, for instance, polls every X seconds, to save resources), but I can't test it, as I don't have an account.

EDIT: And I figured it out: after adding a little delay in loading test.php, which can be as small as possible, the loading indicator stops after load.html has been loaded:

jQuery(document).ready(function() {
  setTimeout(function () {
    $('#main').load("test.php");
  }, 0);
});

Somehow, as is confirmed in a comment on another answer, when the browser gets control back to finish page rendering, the indicator stops spinning. Another advantage is that the request cannot be aborted by pressing Esc.

回复收藏 0 原文

终陌 2024-09-06 14:53:16

抱歉我的一般性回答，但是如果您想要一个更独立于浏览器的程序，您应该使用 jQuery 或其他您喜欢的库，而不是低级别的 XMLHttpRequest 和 ActiveXObject("Microsoft.XMLHTTP")。

编辑：
我创建了两个非常简单的 HTML 文件：test.htm 和 load.htm，并将其放置在网站上的同一目录中（尝试这个 URL http://www.ok-soft-gmbh.com/jQuery/load/load.htm)。我看不到你在问题中描述的效果。将此文件与您的示例进行比较，您将解决您的问题。

加载.htm:

<!DOCTYPE html PUBLIC
          "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head">
  <title>Demonstration of the jQery.load problem</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript">
  jQuery(document).ready(function() {
    $('#main').load("test.htm");
  });
  </script>
</head>

<body>
  <div id='main'></div>
</body>
</html>

测试.htm:

<b>OK!</b>

Sorry for my general answer, but if you want to have a program which are more browser independent you should use jQuery or other your favorite library instead of low level XMLHttpRequest and ActiveXObject("Microsoft.XMLHTTP").

EDITED:
I create two very simple HTML files: test.htm and load.htm and placed there in the same directory on a web site (try this one URL http://www.ok-soft-gmbh.com/jQuery/load/load.htm). I can't see effect which you describes in you question. Compare this files with your examples and you will solve your problem.

load.htm:

<!DOCTYPE html PUBLIC
          "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head">
  <title>Demonstration of the jQery.load problem</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript">
  jQuery(document).ready(function() {
    $('#main').load("test.htm");
  });
  </script>
</head>

<body>
  <div id='main'></div>
</body>
</html>

test.htm:

<b>OK!</b>

回复收藏 0 原文

悲凉≈ 2024-09-06 14:53:16

我不确定 jQuery 或 Ajax，但我在使用片段管理器将片段插入 Ace Editor 时遇到了类似的问题。当页面加载时将代码插入编辑器时，页面似乎永远不会加载 - 选项卡图标将永远旋转。 .setTimeout() 的工作效果非常不一致。当页面加载速度非常快时它会起作用，但当页面加载速度较慢时则不起作用。这可能是因为我没有在 $(document).ready() 中包装任何内容 - 我只是在文档正文的末尾调用我的代码。

这是我发现的一个非 jQuery 解决方案，解决了我永远旋转的选项卡图标问题：

var tillPageLoaded = setInterval(function() {
    if( document.readyState === 'complete' ) {

        clearInterval(tillPageLoaded);
        // load whatever

    }    
}, 5);

在我的例子中， // load What 是：

ace.config.loadModule('ace/ext/language_tools', function () {
    myEditorInstance.insertSnippet( 'some string' );
});

I'm not sure about jQuery or Ajax, but I had a similar problem with inserting snippets into Ace Editor with the Snippet Manager. When inserting code into the editor right when the page was loading the page would seem to never load - the tab icon would spin forever. .setTimeout() only worked very inconsistently. It would work when the page loaded very quickly, but not when the page loaded more slowly. That might be because I wasn't wrapping anything in $(document).ready() - I was only calling my code at the end of the document body.

Here's a no-jQuery solution I found to my forever-spinning tab icon problem:

var tillPageLoaded = setInterval(function() {
    if( document.readyState === 'complete' ) {

        clearInterval(tillPageLoaded);
        // load whatever

    }    
}, 5);

In my case, // load whatever was:

ace.config.loadModule('ace/ext/language_tools', function () {
    myEditorInstance.insertSnippet( 'some string' );
});

回复收藏 0 原文

简美 2024-09-06 14:53:16

使用这个功能

function getHTTPObject() {
 var xhr = false;
 if (window.XMLHttpRequest) {
  xhr = new XMLHttpRequest();
 } else if (window.ActiveXObject) {
  try {
   xhr = new ActiveXObject("Msxml2.XMLHTTP");
  } catch(e) {
   try {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
   } catch(e) {
    xhr = false;
   };
  };
 };
 return xhr;
};

use this function

function getHTTPObject() {
 var xhr = false;
 if (window.XMLHttpRequest) {
  xhr = new XMLHttpRequest();
 } else if (window.ActiveXObject) {
  try {
   xhr = new ActiveXObject("Msxml2.XMLHTTP");
  } catch(e) {
   try {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
   } catch(e) {
    xhr = false;
   };
  };
 };
 return xhr;
};

回复收藏 0 原文

~没有更多了~