我们经常使用动态加载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. Android小技术知识(多用于面试)

    Android Dev Doc Android 开发 多使用内部类 使用方便且效率高 UI方面的知识 一.在编写layout的xml文件时,一定要仔细!如果在报错的时候,如何解决? 解决:将xml仔细 ...

  2. 解决Fiddler不能监听Java HttpURLConnection请求的方法

    在默认情况下,Fiddler不能监听Java HttpURLConnection请求.究其原因,Java的网络通信协议栈可能浏览器的通信协议栈略有区别,Fiddler监听Http请求的原理是 在应用程 ...

  3. Android中对Handle机制的理解

    一.重要參考资料  [參考资料]     眼下来看,以下的几个网址中的内容质量比較不错.基本不须要再读别的网址了. 1.android消息机制一     http://xtfncel.javaeye. ...

  4. 模式的秘密-代理模式(2)-JDK动态代理

    代理模式-动态代理 (1) (2) 代码实践动态代理: 第一步:被代理类的接口: package com.JdkProxy; public interface Moveable { void move ...

  5. 【LeetCode】96. Unique Binary Search Trees (2 solutions)

    Unique Binary Search Trees Given n, how many structurally unique BST's (binary search trees) that st ...

  6. JS字符编码函数区别分析

    http://www.jb51.net/article/14657.htm js对文字编码有3个函数: escape,encodeURI,encodeURIComponent, 对应的解码函数:une ...

  7. laravel使用的模板引擎 blade

    使用blade引擎的话必须在控制器中使用use   Blade

  8. android多线程进度条

    多线程实现更新android进度条. 实例教程,详细信息我已经注释   android多线程进度条   01package com.shougao.hello; 02 03import android ...

  9. C#:复选框操作类

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.W ...

  10. FreeMarker中的list集合前后台代码

    freemarker中的list集合前后台代码: FreeMarker是一款模板引擎: 即一种基于模板和要改变的数据, 并用来生成输出文本(HTML网页.电子邮件.配置文件.源代码等)的通用工具. 它 ...