我们经常使用动态加载Javascript,写个函数很容易现实,之前也写过一个函数,不过当加载多个JS时,只能根据浏览器返回的顺序来先后加载,这肯定不是我们想要的,现在使用了一下技巧,当加载多个JS时,能按照我们的顺序加载:

  1. /*
  2. Name:动态加载JS
  3. Author:kingwell Leng
  4. Date : 2013/4/21
  5. E-mail: jinhua.leng##gmail.com
  6. */
  7. function getScript(obj, callback) {
  8. var arr = obj,
  9. timeout,
  10. str = typeof obj === 'string';
  11. function add() {
  12. var script = document.createElement("script");
  13. header = document.getElementsByTagName("head")[0];
  14. script.src = str ? obj : arr[0];
  15. script.type = "text/javascript";
  16. if (str) {
  17. if (script.readyState) {
  18. script.onreadystatechange = function () {
  19. if (script.readyState === 'loaded' || script.readyState === 'complete') {
  20. script.onreadystatechange = null;
  21. callback && callback();
  22. }
  23. };
  24. } else {
  25. script.onload = function () {
  26. callback && callback();
  27. };
  28. }
  29. } else {
  30. if (arr.length >= 1) {
  31. if (script.readyState) {
  32. script.onreadystatechange = function () {
  33. if (script.readyState === 'loaded' || script.readyState === 'complete') {
  34. script.onreadystatechange = null;
  35. arr.shift();
  36. timeout = setTimeout(add, 1);
  37. }
  38. };
  39. } else {
  40. script.onload = function () {
  41. arr.shift();
  42. timeout = setTimeout(add, 1);
  43. };
  44. }
  45. } else {
  46. clearTimeout(timeout);
  47. callback && callback();
  48. }
  49. }
  50. header.appendChild(script);
  51. }
  52. add();
  53. }
/*
Name:动态加载JS
Author:kingwell Leng
Date : 2013/4/21
E-mail: jinhua.leng##gmail.com */
function getScript(obj, callback) {
var arr = obj,
timeout,
str = typeof obj === 'string';
function add() {
var script = document.createElement("script");
header = document.getElementsByTagName("head")[0];
script.src = str ? obj : arr[0];
script.type = "text/javascript";
if (str) {
if (script.readyState) {
script.onreadystatechange = function () {
if (script.readyState === 'loaded' || script.readyState === 'complete') {
script.onreadystatechange = null;
callback && callback();
}
};
} else {
script.onload = function () {
callback && callback();
};
}
} else {
if (arr.length >= 1) {
if (script.readyState) {
script.onreadystatechange = function () {
if (script.readyState === 'loaded' || script.readyState === 'complete') {
script.onreadystatechange = null;
arr.shift();
timeout = setTimeout(add, 1);
}
};
} else {
script.onload = function () {
arr.shift();
timeout = setTimeout(add, 1);
};
}
} else {
clearTimeout(timeout);
callback && callback();
}
}
header.appendChild(script);
}
add();
}

调用:

  1. getScript(['http://code.jquery.com/jquery-1.9.1.min.js','js1.js', 'js2.js', 'js3.js', 'js4.js'], function () {
  2. alert('我是按顺序加载啦');
  3. });
getScript(['http://code.jquery.com/jquery-1.9.1.min.js','js1.js', 'js2.js', 'js3.js', 'js4.js'], function () {
alert('我是按顺序加载啦');
});

现在是按照我们写代码的顺序加载啦...

动态加载javascript增强版的更多相关文章

  1. 两种动态加载JavaScript文件的方法

    两种动态加载JavaScript文件的方法 第一种便是利用ajax方式,第二种是,动静创建一个script标签,配置其src属性,经过把script标签拔出到页面head来加载js,感乐趣的网友可以看 ...

  2. 网页特效-动态加载JavaScript

    描述: 把一些逻辑独立的JavaScript脚本文件单独加载,是一种常见的JavaScript动态加载技术.可以减少不必要的JavaScript脚本文件的加载,以提高网页浏览速度 代码: <!D ...

  3. Ext JS 如何动态加载JavaScript创建窗体

    JavaScript不需要编译即可运行,这让JavaScript构建的应用程序可以变得很灵活.我们可以根据需要动态从服务器加载JavaScript脚本来创建和控制UI来与用户交互.下面结合Ext JS ...

  4. [转]动态加载javascript

    动态加载script到页面大约有俩方法 第一种就是利用ajax方式,把script文件代码从后台加载到前台,然后对加载到的内容通过eval()执行代码. 第二种是,动态创建一个script标签,设置其 ...

  5. javascript 动态加载javascript文件

    /* loadFile(data, callback): 动态加载js文件 data: 存放需要加载的js文件的url("url" || ["url", &qu ...

  6. 对动态加载javascript脚本的研究

    有时我们需要在javascript脚本中创建js文件,那么在javascript脚本中创建的js文件又是如何执行的呢?和我们直接在HTML页面种写一个script标签的效果是一样的吗?(关于页面scr ...

  7. 使用jQuery动态加载js脚本

    动态加载Javascript是一项非常强大且有用的技术.这方面的主题在本站已经讨论了不少,我也经常会在一些个人项目上使用RequireJS和Dojo加载js.它们很强大,但有时候也会得不偿失.如果你使 ...

  8. 使用jQuery动态加载js脚本文件的方法

    动态加载Javascript是一项非常强大且有用的技术.这方面的主题在网上已经讨论了不少,我也经常会在一些个人项目上使用RequireJS和Dojo加载js 它们很强大,但有时候也会得不偿失.如果你使 ...

  9. jQuery动态加载JS以减少服务器压力

    如果您要创建一个web2.0的应用程序,那么你的网页会包括大量的JavaScript文件,这些可能会拖慢您的网页.因此,动态加载JavaScript代码到您的网页是一个好主意,即只有当实用他们的时候加 ...

随机推荐

  1. angularjs中的数据绑定

    这是一个最简单的angularjs的例子,关于数据绑定的,大家可以执行一下,看看效果 <html ng-app> <head> <title>angularjs-i ...

  2. 通过反射获取class文件中的构造方法,运行构造方法

    /* * 通过反射获取class文件中的构造方法,运行构造方法 * 运行构造方法,创建对象 * 1.获取class文件对象 * 2.从class文件对象中,获取需要的成员 * * Constructo ...

  3. Android DataBinding库(MVVM设计模式)

    什么是MVVM 说到DataBinding,就有必要先提起MVVM设计模式.Model–View–ViewModel(MVVM) 是一个软件架构设计模式,相比MVVM,大家对MVC或MVP可能会更加熟 ...

  4. AndroidStudio简单的apk混淆

    打包APK又一个看起来难 却不难并且不可或缺的标配,为什么这样说呢?由于没有混淆,你的代码被别人反编译你的代码将像一个裸奔的人一样展示在别人的面前.你的APP的安全将得不到保证.Android搞的混淆 ...

  5. 苹果开发——App内购以及验证store的收据(一)

    原地址:http://zengwu3915.blog.163.com/blog/static/27834897201375105236580?suggestedreading 发了几天时间在网上折腾了 ...

  6. vue computed 可以使用getter和setter

    var vm = new Vue({ data: { a: 1 }, computed: { // 仅读取 aDouble: function () { return this.a * 2 }, // ...

  7. OpenERP7.0中非admin帐号新增其它用户问题

    在OpenERP7.0中,通过admin新增了一个管理员帐号,然后登录管理员帐号,再新增其它用户时提示错误,系统提示对users没有create权限. 经测试了解,是因为安装了多公司模块后,在记录规则 ...

  8. C# 非顶端窗口截图 - 用于查找指定窗口并截图

    原文地址:http://blog.csdn.net/u013096568/article/details/53400389 panel上可以通过DrawToBitmap截图,不管是否在屏幕外是否有遮挡 ...

  9. mosquitto ---配置SSL/TLS

    在服务器电脑上面创建myCA文件夹, 如在/home/qa/ 文件夹下使用命令, mkdir myCA 然后执行以下命令,我们将创建并使用其他用户没有权限访问的目录. sudo chmod 700cd ...

  10. EMQ ---payload

    问:payload传输过程中会不会拆包,粘包?业务层拿到payload还需要自己组包吗? 答:不需要,mqtt协议有约定,emq会帮忙处理tcp的粘包拆包.总之,直接拿出来用即可. 问:payload ...