延迟加载外部js文件

我们需要在页面上引用一些外部的js文件，比如谷歌分析js，360安全分析js等等。

而这些外部js加载的时间通常都比较慢，特别是服务器在国外的js加载。

当我们打开我们的页面时就感觉到页面打开很慢，尤其是js实现的页面内容展示感觉迟迟不执行。

这个时候我们可以延迟加载外部js文件。

等页面都展示完后再加载外部js文件。

很多人说“那就用defer”或“async”，甚至有些人说“那就将你的javascript代码放在页面代码底部”。

上述方法都不能解决在web页面完全加载后，再加载外部js的问题。上述方法也会偶尔让你收到Google页面速度测试工具的“延迟加载javascript”警告。

收集了以下几种方法:

方法一

这个解决方案将是来自Google帮助页面的推荐方案。

下面是Google推荐的代码。这些代码应被放置在</body>标签前(接近HTML文件底部)。另外，外部JS文件名是defer.js（使用时相应替换成我们的外部js链接）

<script type="text/javascript">function downloadJSAtOnload() {var element = document.createElement("script");element.src = "defer.js";document.body.appendChild(element);}if (window.addEventListener)window.addEventListener("load", downloadJSAtOnload, false);else if (window.attachEvent)window.attachEvent("onload", downloadJSAtOnload);else window.onload = downloadJSAtOnload;</script>

这里做了什么？

这段代码意思是等到整个文档加载完后，再加载外部文件“defer.js”。

具体说明

1.复制上面代码

2.粘贴代码到HTML的</body>标签前 (靠近HTML文件底部)

3.修改“defer.js”为你的外部JS文件名

4.确保你文件路径是正确的。例如：如果你仅输入“defer.js”，那么“defer.js”文件一定与HTML文件在同一文件夹下。

这段代码能用在哪里(和哪里不能用)

这段代码直到文档加载完才会加载指定的外部JS文件。因此，不应该把那些页面正常加载需要依赖的javascript代码放在这里。而应该将JavaScript代码分成两组。一组是因页面需要而立即加载的javascript代码，另外一组是在页面加载后进行操作的javascript代码(例如添加click事件或其他东西)。这些需等到页面加载后再执行的JavaScript代码，应放在一个外部文件，然后再引进来。

方法二

原本引用外部js如下：

<script src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js" type="text/javascript" charset="utf-8"></script>

修改为:

<script data-url="http://tjs.sjs.sinajs.cn/open/api/js/wb.js" type="text/javascript" charset="utf-8"></script>

src改成了data-url，这样在浏览器解析dom的时候就不会立即加载外部js代码，只有当我们根据data-url中的值新增一个src属性，浏览器才会加载外部js代码。

我们只需要在jQuery中写一点代码，就能实现延迟加载的效果，代码如下：

<script>jQuery(function($) {    $('script[data-url]').each(function() {        var _this = $(this),            url = _this.attr('data-url');        _this.attr('src',url);     });});</script>

方法三

将其中的google-analytics.com/ga.js替换为我们的外部js链接即可

var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); $.getScript(gaJsHost + "google-analytics.com/ga.js",function(){ try { var pageTracker = _gat._getTracker("UA-123456-16"); pageTracker._trackPageview(); } catch(err) {} });

方法四

将其中的http://i03.youxigu.com/js/util/yahoo.js替换为我们的外部js链接即可

function _GetJsData(url, callback) {      var scripts = document.createElement('script');      document.body.appendChild(scripts);        scripts.onload = function() {          isok();         // document.body.removeChild(this);      };      scripts.onreadystatechange = function() {          if (this.readyState == "loaded") {              isok();          //    document.body.removeChild(this);          }      };      scripts.charset = "GBK";      scripts.src = url;  }  _GetJsData('http://i03.youxigu.com/js/util/yahoo.js','isok');  var isok=function(){alert('isok')};