动态加载javascript增强版
我们经常使用动态加载Javascript,写个函数很容易现实,之前也写过一个函数,不过当加载多个JS时,只能根据浏览器返回的顺序来先后加载,这肯定不是我们想要的,现在使用了一下技巧,当加载多个JS时,能按照我们的顺序加载:
- /*
- 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();
- }
/*
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();
}
调用:
- getScript(['http://code.jquery.com/jquery-1.9.1.min.js','js1.js', 'js2.js', 'js3.js', 'js4.js'], function () {
- alert('我是按顺序加载啦');
- });
getScript(['http://code.jquery.com/jquery-1.9.1.min.js','js1.js', 'js2.js', 'js3.js', 'js4.js'], function () {
alert('我是按顺序加载啦');
});
现在是按照我们写代码的顺序加载啦...
动态加载javascript增强版的更多相关文章
- 两种动态加载JavaScript文件的方法
两种动态加载JavaScript文件的方法 第一种便是利用ajax方式,第二种是,动静创建一个script标签,配置其src属性,经过把script标签拔出到页面head来加载js,感乐趣的网友可以看 ...
- 网页特效-动态加载JavaScript
描述: 把一些逻辑独立的JavaScript脚本文件单独加载,是一种常见的JavaScript动态加载技术.可以减少不必要的JavaScript脚本文件的加载,以提高网页浏览速度 代码: <!D ...
- Ext JS 如何动态加载JavaScript创建窗体
JavaScript不需要编译即可运行,这让JavaScript构建的应用程序可以变得很灵活.我们可以根据需要动态从服务器加载JavaScript脚本来创建和控制UI来与用户交互.下面结合Ext JS ...
- [转]动态加载javascript
动态加载script到页面大约有俩方法 第一种就是利用ajax方式,把script文件代码从后台加载到前台,然后对加载到的内容通过eval()执行代码. 第二种是,动态创建一个script标签,设置其 ...
- javascript 动态加载javascript文件
/* loadFile(data, callback): 动态加载js文件 data: 存放需要加载的js文件的url("url" || ["url", &qu ...
- 对动态加载javascript脚本的研究
有时我们需要在javascript脚本中创建js文件,那么在javascript脚本中创建的js文件又是如何执行的呢?和我们直接在HTML页面种写一个script标签的效果是一样的吗?(关于页面scr ...
- 使用jQuery动态加载js脚本
动态加载Javascript是一项非常强大且有用的技术.这方面的主题在本站已经讨论了不少,我也经常会在一些个人项目上使用RequireJS和Dojo加载js.它们很强大,但有时候也会得不偿失.如果你使 ...
- 使用jQuery动态加载js脚本文件的方法
动态加载Javascript是一项非常强大且有用的技术.这方面的主题在网上已经讨论了不少,我也经常会在一些个人项目上使用RequireJS和Dojo加载js 它们很强大,但有时候也会得不偿失.如果你使 ...
- jQuery动态加载JS以减少服务器压力
如果您要创建一个web2.0的应用程序,那么你的网页会包括大量的JavaScript文件,这些可能会拖慢您的网页.因此,动态加载JavaScript代码到您的网页是一个好主意,即只有当实用他们的时候加 ...
随机推荐
- busybox hexdump 命令使用
http://blog.sina.com.cn/s/blog_a6559d920101gvlk.html hexdump命令是Linux下的打印16进制的利器,它可以按我们指定的格式输出16进制,特别 ...
- Hadoop之MapReduce命令
概述 全部的Hadoop命令都通过bin/mapred脚本调用. 在没有不论什么參数的情况下.执行mapred脚本将打印该命令描写叙述. 使用:mapred [--config confdir] CO ...
- 你远比想象中强大pdf
读后感: 序 一.强化自我认知 认识你自己 你认为什么东西是最重要的呢? 这个问题的答案就是价值观. 让定期审视人生成为习惯 除去恐惧 树立目标 二.改变思维模式 选择,记住你的选择(做决定) 巅 ...
- 通用的sql语句
1.插入: INSERT INTO 表名称 VALUES (值1, 值2,....) 我们也可以指定所要插入数据的列: INSERT INTO table_name (列1, 列2,...) VALU ...
- 从0开始搭建symphony
目标:在本地服务器中运行symphonyX 困难:=.= 基本全是困难…服务器重装了win/ubuntu/centos均不识别网卡,也是醉了. 1.通过Eclipse进行配置. 一开始以为需要单独下载 ...
- js加强小结
一)回顾JavaScript基础 (1)函数的定义方式 *>>正常方式 function add(num1,num2){...} >>构造器方式 var add = new F ...
- 总结一些js自定义的函数
1.dayin() 作用:将id为dayin的内容,新建页面并打印,可解决打印某页面中的部分内容的问题. 使用方法:将要打印的内容通过 <span id="dayin"> ...
- 用lambda表达式树替代反射
本节重点不讲反射机制,而是讲lambda表达式树来替代反射中常用的获取属性和方法,来达到相同的效果但却比反射高效. 每个人都知道,用反射调用一个方法或者对属性执行SetValue和GetValue操作 ...
- python基础之Event对象、队列和多进程基础
Event对象 用于线程间通信,即程序中的其一个线程需要通过判断某个线程的状态来确定自己下一步的操作,就用到了event对象 event对象默认为假(Flase),即遇到event对象在等待就阻塞线程 ...
- Nginx配置优化详解
如果你已经安装过Nginx并在生产环境中使用,那么Nginx配置优化你一定也要做,这样才能看到Nginx性能,本文就从基本配置优化开始到高层配置教你如何优化Nginx 大多数的Nginx安装指南告诉你 ...