jQuery文档就绪函数可能需要很长时间才能执行

Question

我的问题是有时候一段JavaScript代码（通常是Google Analytics）加载时间会非常长，尽管HTML并不需要准备好以进行“遍历和操作”。如果我要使用以下代码：

$(document).ready(function () {
    $("p").text("The DOM is now loaded and can be manipulated.");
});

这是否意味着直到加载类似Google Analytics的东西之后，<p>才会被填充？通常大多数网站不需要类似Google Analytics的东西，而我经常发现自己在等待它的加载。(我不想使用onload，因为 它不可靠。)有更好的方法或者说“不要等待[...]”的方法吗？注意：我通常无法将代码放在<script>标签中，就在</body>标签之前，因为该网站是基于模板的。我通常只能编辑页面的“内容”。

- Darryl Hein

Answer 1

你尝试过在ready函数内部加载Google Analytics吗？这里有一个讨论动态脚本加载的链接。假设在已经执行了ready脚本的其他部分之后，你会在最后执行这个操作。

- tvanfosson

Answer 2

Google发布了他们所称的“异步跟踪”，与it技术有关。请参考：异步跟踪文档。

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-X']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
  })();

</script>

这样做可以解决问题，因为它只会在DOM被解析后加载一次，因此您可以立即使用页面上的所有内容。

- Darryl Hein

---

如果您正在使用当前版本的Google Analytics（analytics.js），请注意推荐代码已有所更改。 - Michael Kropat

Answer 3

在大多数现代浏览器中，您现在可以编写以下内容：

<script>var _gaq = _gaq || [["_setAccount","UA-XXXXX-X"],["_trackPageview"]]; </script>
<script src="//www.google-analytics.com/ga.js" async></script>

这个脚本将在大多数浏览器上异步加载，并自动适应不同的方案。

您可能希望使用更长的版本，这对于旧版浏览器更加安全：

<script>var _gaq = _gaq || [["_setAccount","UA-XXXXX-X"],["_trackPageview"]]; </script>
<script type="text/javascript" src="//www.google-analytics.com/ga.js" async="true" defer="true"></script>

一些注意事项：

• IE6中存在一个bug，由于缺少协议而导致JS无法加载（参见http://www.paulirish.com/2010/the-protocol-relative-url/），但您可以添加您正在使用的协议。
• 旧版浏览器不会理解“async”属性，因此将在延迟加载（页面加载后）或仅在找到时加载它们（因此不是异步）。

- Matthew Wilcoxson

Answer 4

这只是猜测，但你考虑过使用setTimeOut()了吗？

$(document).ready(function()
{
   setTimeOut(function()
   {
      // Your code comes here
   }, 0); // We don't really need any delay
});

setTimeOut()有一个很好的特性，可以逃避调用栈，因此它可能解决你的问题。

- DrJokepu

Answer 5

我曾经遇到过同样的问题。只需在 JavaScript 加载时加入以下代码，之后在 IE 上就可以正常运行了：

jQuery.noConflict();

- lukman

---

我认为那不会起作用...那是为了不同的目的。 - Darryl Hein