脚本加载后执行JS回调函数的方法

动态脚本简单示例

// IE下：
var HEAD = document.getElementsByTagName('head')[0] || document.documentElement

var src = 'http://xxxxxx.com'

var script = document.createElement('script')

script.setAttribute('type', 'text/javascript')

script.onreadystatechange = function() {

    if (this.readyState === 'loaded' || this.readyState === 'complete') {

        console.log('加载成功！')

    }

}

script.setAttribute('src', src)

HEAD.appendChild(script)

// Chrome等现代浏览器：
var HEAD = document.getElementsByTagName('head')[0] || document.documentElement;

var src = 'http://xxxxxx.com'

var script = document.createElement('script')

script.setAttribute('type', 'text/javascript')

script.onload = function() {

    console.log('加载成功!')

}

script.setAttribute('src', src)

HEAD.appendChild(script)

串行和并行动态脚本

/** 

 * 串行加载指定的脚本

 * 串行加载[异步]逐个加载，每个加载完成后加载下一个

 * 全部加载完成后执行回调

 * @param {Array|String} scripts 指定要加载的脚本

 * @param {Function} callback 成功后回调的函数

 * @return {Array} 所有生成的脚本元素对象数组

 */

function seriesLoadScripts(scripts, callback) {

 if(typeof(scripts) !== 'object') {

  var scripts = [scripts];

 }

 var HEAD = document.getElementsByTagName('head')[0] || document.documentElement;

 var s = [];

 var last = scripts.length - 1;

 //递归

 var recursiveLoad = function(i) {

  s[i] = document.createElement('script');

  s[i].setAttribute('type','text/javascript');

  // Attach handlers for all browsers

  // 异步

  s[i].onload = s[i].onreadystatechange = function() {

   if(!/*@cc_on!@*/0 || this.readyState === 'loaded' || this.readyState === 'complete') {

    this.onload = this.onreadystatechange = null; 

    this.parentNode.removeChild(this);

    if(i !== last) {

     recursiveLoad(i + 1);

    } else if (typeof(callback) === 'function') {

     callback()

    };

   }

  }

  // 同步

  s[i].setAttribute('src', scripts[i]);

  HEAD.appendChild(s[i]);

 };

 recursiveLoad(0);

}

/**

 * 并行加载指定的脚本

 * 并行加载[同步]同时加载，不管上个是否加载完成，直接加载全部

 * 全部加载完成后执行回调

 * @param {Array|String} scripts 指定要加载的脚本

 * @param {Function} callback 成功后回调的函数

 * @return {Array} 所有生成的脚本元素对象数组

 */

function parallelLoadScripts(scripts, callback) {

 if(typeof(scripts) !== 'object') {

  var scripts = [scripts];

 }

 var HEAD = document.getElementsByTagName('head')[0] || document.documentElement;

 var s = [];

 var loaded = 0;

 for(var i = 0; i < scripts.length; i++) {

  s[i] = document.createElement('script');

  s[i].setAttribute('type','text/javascript');

  // Attach handlers for all browsers

  // 异步

  s[i].onload = s[i].onreadystatechange = function() {

   if(!/*@cc_on!@*/0 || this.readyState === 'loaded' || this.readyState === 'complete') {

    loaded++;

    this.onload = this.onreadystatechange = null;

    this.parentNode.removeChild(this);

    if(loaded === scripts.length && typeof(callback) === 'function') callback();

   }

  };

  // 同步

  s[i].setAttribute('src',scripts[i]);

  HEAD.appendChild(s[i]);

 }

}

使用方法

var scripts = [ 

 "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js",

 "http://wellstyled.com/files/jquery.debug/jquery.debug.js"

];

// 这两个文件分别是 jQuery 1.4.的库文件和 jQuery Debug 插件

// 然后你可以使用下面的方法调用并在成功后执行回调了。

parallelLoadScripts(scripts, function() { 

 /*

 debug = new $.debug({ 

  posTo : { x:'right', y:'bottom' },

  width: '480px',

  height: '50%',

  itempider : '<hr>',

  listDOM : 'all'

 });

 */

 console.log('脚本加载完成啦');

});

扩展知识

posted @ 2019-11-30 23:43  绝技小嗨皮  阅读(461)  评论(0)  编辑  收藏  举报
Title