异步加载jQuery

Question

我的谷歌分析应该是异步加载的。我不确定这到底是什么意思：

<script type="text/javascript">
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'xxx']);
        _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';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();
    </script>

我不需要jQuery立即可用。有没有一种方法也可以使其异步？

Answer 1

Google Analytics在你的例子中是异步加载的。处理它的部分是ga.async = true;。异步意味着浏览器将继续加载其余内容，即使此内容需要更长时间才能加载。在较旧的浏览器中，内容将按照文档的顺序加载，如果加载速度较慢，浏览器显示页面的时间会更长。

如果希望jQuery异步加载，只需在<script>标记中添加async="async"即可。请记住，只有较新的浏览器才支持此功能。

或者，谷歌确实提供了Google Loader，允许您异步加载jQuery和许多其他库。你可以看看this Stack Overflow question的例子。

Answer 2

HeadJS为这类事情提供了一个很好的API。

JavaScript加载器并行加载脚本，但按顺序执行

Head JS可以像图片一样加载JavaScript文件，而不会阻塞页面。即使只有一个组合文件，你的页面也会更快。

head.js("/path/to/jquery.js", "/google/analytics.js", "/js/site.js",
function() {
    // all done
});

Answer 3

在页面的Onload ()事件上，您可以插入一个函数，该函数将在页面加载后自动分配对您想要以异步方式加载的JavaScript文件的引用。

function afterLoad(){
  var element1 = document.createElement(“script”);
  element1.src = “somefile.js”;
  element1.type=”text/javascript”;
  element1.async=true;
  document.getElementsByTagName(“head”)[0].appendChild(element1);
}

有关更多信息，请查看http://www.tutkiun.com/2010/07/load-javascript-after-pageload.html