动态加载JavaScript

Question

我有一个网页和一个嵌入了谷歌地图的画布.我在这个网站上使用jQuery.

我想仅在用户点击"向我显示地图"时加载Google Maps API.此外,我想从标题中删除整个Google地图的加载,以提高我的网页性能.

所以我需要动态加载JavaScript.我可以使用什么JavaScript功能？

Answer 1

您可能希望使用jQuery.getScript,它可以帮助您在需要时加载Google Maps API javascript文件.

例:

$.getScript('http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=true', function(data, textStatus){
   console.log(textStatus, data);
   // do whatever you want
});

Answer 2

使用按需加载加载策略

按需加载

假设可能需要代码,之前的模式在页面加载后无条件地加载了额外的JavaScript.但是,我们能做得更好,只加载部分代码,只加载真正需要的部分吗？想象一下,页面上有一个带有不同标签的侧边栏.单击选项卡会生成XHR请求以获取内容,更新选项卡内容,并为更新淡化颜色设置动画. 如果这是页面上唯一需要XHR和动画库的地方,以及如果用户从未点击选项卡,该怎么办？ 输入按需加载模式.您可以创建一个require()函数或方法,该函数或方法将加载要加载的脚本的文件名,并在加载其他脚本时执行回调函数.

require()函数可以这样使用:

require("extra.js", function () {
   functionDefinedInExtraJS();
});

让我们看看如何实现这样的功能.请求附加脚本很简单.您只需遵循动态元素模式即可.由于浏览器的不同,弄清楚加载脚本的时间有点棘手:

function require(file, callback) {
   var script = document.getElementsByTagName('script')[0],
   newjs = document.createElement('script');

  // IE
  newjs.onreadystatechange = function () {
     if (newjs.readyState === 'loaded' || newjs.readyState === 'complete') {
        newjs.onreadystatechange = null;
        callback();
     }
  };
  // others
  newjs.onload = function () {
     callback();
  }; 
  newjs.src = file;
  script.parentNode.insertBefore(newjs, script);
}

"JavaScript模式,Stoyan Stefanov(O'Reilly).版权所有2010 Yahoo!,Inc.,9780596806750."