LittleHZ [叶歆昊]

异步载入javascript方法避免长时间的js等待完成

[文章作者：叶歆昊   最后修改：2010-07-21   转载请注明原文链接：http://littz.com/asynchronous-javascript.html]

早几天写了个转换程序从Discuz!X!门户转换到WordPress换用WPSummer高级主题后，发现该主题支持Addthis的收藏&分享功能，非常好用。

但JS有个特点，如果有任何一个JS没有加载完成，页面始终会显示等待加载完成。Addthis使用的地址是GoogleCode SVN的地址http://china-addthis.googlecode.com/svn/trunk/addthis.js，该地址容易被墙，没有墙的时候也速度不大快。所以决定把这部分JS修改成异步载入方式。

single.php中原代码如下：

<script type="text/javascript" src="http://china-addthis.googlecode.com/svn/trunk/addthis.js" charset="UTF-8"></script>

参考Google Analytics代码，修改成：

<script type="text/javascript" charset="utf-8">
	(function() {
		var asyncjs = document.createElement('script');
			asyncjs.type = 'text/javascript';
			asyncjs.async = true;
			asyncjs.charset = "utf-8";
			asyncjs.src = 'http://china-addthis.googlecode.com/svn/trunk/addthis.js';
		var asynclo = document.getElementsByTagName('script')[0];
			asynclo.parentNode.insertBefore(asyncjs, asynclo);
	})();
</script>

修改之后，该JS会在其他JS完成的时候才加载，同时该异步加载方式不计入浏览器的等待进度条中，一定程度上加快访问速度的视觉效果。