javascript loadScript异步加载脚本示例讲解

  一、语法:

  loadScript(url[,callback])

  或者

  loadScript(settings)

  二、settings支持的参数:

  url:脚本路径

  async:是否异步,默认false(HTML5)

  charset:文件编码

  cache:是否缓存,默认为true

  success:加载成功后执行的函数,优先执行callback。

  三、调用举例:

  

复制代码 代码如下:

  //loadScript(url[,callback])

  loadScript(“http://code.jquery.com/jquery.js”);

  loadScript(“http://code.jquery.com/jquery.js”,function(){

  console.log(1)

  });

  //loadScript(settings)

  loadScript({“url”:”http://code.jquery.com/jquery.js”,”async”:false,”charset”:”utf-8″,”cache”:false});

  loadScript({“url”:”http://code.jquery.com/jquery.js”,”async”:false,”charset”:”utf-8″,”success”:function(){

  console.log(2)

  }});

  //或者你可以酱紫:

  //loadScript(settings[,callback])

  loadScript({“url”:”http://code.jquery.com/jquery.js”,”async”:false,”charset”:”utf-8″},function(){

  console.log($)

  });

  四、源代码:

  

复制代码 代码如下:

  function loadScript(url,callback) {

  var head = document.head || document.getElementsByTagName(“head”)[0] || document.documentElement,

  script,

  options,

  if (typeof url === “object”) {

  options = url;

  url = undefined;

  }

  s = options || {};

  url = url || s.url;

  callback = callback || s.success;

  script = document.createElement(“script”);

  script.async = s.async || false;

  script.type = “text/javascript”;

  if (s.charset) {

  script.charset = s.charset;

  }

  if(s.cache === false){

  url = url+( /\?/.test( url ) ? “&” : “?” )+ “_=” +(new Date()).getTime();

  }

  script.src = url;

  head.insertBefore(script, head.firstChild);

  if(callback){

  document.addEventListener ? script.addEventListener(“load”, callback, false) : script.onreadystatechange = function() {

  if (/loaded|complete/.test(script.readyState)) {

  script.onreadystatechange = null

  callback()

  }

  }

  }

  }