按顺序动态加载js, 可控版本, 有回调
load和onScriptLoad方法是直接从layerui的源码里粘贴出来修改了一下用的, 来源: https://gitee.com/sentsin/layui/blob/master/src/layui.js
var version = 1;
function jsloader(arr, cb) {
var head = document.getElementsByTagName('head')[0];
var _load_index = 0;
function onScriptLoad(node, e, url) {
var readyRegExp = navigator.platform === 'PLaySTATION 3' ? /^complete$/ : /^(complete|loaded)$/
if (e.type === 'load' || (readyRegExp.test((e.currentTarget || e.srcElement).readyState))) {
head.removeChild(node);
onCallback();
}
}
function onCallback() {
_load_index++;
if (_load_index == arr.length) {
cb();
} else {
load(arr[_load_index]);
}
}
var isOpera = typeof opera !== 'undefined' && opera.toString() === '[object Opera]';
function load(url) {
var node = document.createElement('script');
node.async = true;
node.charset = 'utf-8';
node.src = url + '?v=' + version;
head.appendChild(node);
if (node.attachEvent && !(node.attachEvent.toString && node.attachEvent.toString().indexOf('[native code') < 0) && !isOpera) {
node.attachEvent('onreadystatechange', function (e) {
onScriptLoad(node, e, url);
});
} else {
node.addEventListener('load', function (e) {
onScriptLoad(node, e, url);
}, false);
}
}
load(arr[_load_index]);
}
使用方法:
//使用方式
jsloader(["js/1.js", "js/2.js", "js/3.js"], function () {
console.log('all complete');
});
1/2/3.js内容
//1.js
var a = 1;
console.log(1); //2.js
var b = 1;
console.log('a:' + a + ' / ' + 2); //3.js
var c = 1;
console.log('a:' + a + ' / ' + 'b:' + b + ' / ' + 3);
效果:

按顺序动态加载js, 可控版本, 有回调的更多相关文章
- 动态加载JS,并执行回调函数
有些时候我们需要动态的加载一些JS,并在JS加载完成后执行一些回调函数. var loadscript = { $$: function (id) { return document.getEleme ...
- JavaScript 元素的插入顺序以及动态加载js
*****************记录下今天的心得***************** 1.元素的插入顺序 需求:异步从后台读取两个数据a和b,并动态加载到父容器x中,要求a必须在b的左边 实际情况:一 ...
- 动态加载JS函数
一般性的,当我们需要加载js文件的时候都会使用script标签来实现,类似于如下代码: 代码如下: <script type="text/javascript" src=&q ...
- Ext JS学习第十天 Ext基础之动态加载JS文件(补充)
此文用来记录学习笔记: •Ext4.x版本提供的一大亮点就是Ext.Loader这个类的动态加载机制!只要遵循路径规范,即可动态加载js文件,方便把自己扩展组件动态加载进来,并且减轻浏览器的压力. • ...
- 动态加载js,css(项目中需要的)
最近做的一个项目需要加入百度统计,大家都知道百度统计在页面引用就是一坨js,实现方法很简单引用到页面就ok了. 那么问题来了,虽然我不知道百度统计的原理是啥,我的测试服引用了百度统计,百度统计账号里面 ...
- javascript动态加载js文件主流浏览器兼容版
一.代码示例: <html> <head> <meta http-equiv="Content-Type" content="text/ht ...
- 关于动态加载js
已知一个需要动态加载的js的文件路径数组,动态加载数组里面所有的js文件. 加载分两种情况: 1. 并行加载,不管js的执行顺序. 2. 串行加载,即一个一个加载,上一个加载完再加载下一个,直到最后. ...
- 页面加载异常 清除浏览器静态文件 js css 缓存 js动态加载js css文件,可以配置文件后辍,防止浏览器缓存
js清除浏览器缓存的几种方法 - 兔老霸夏 - 博客园 https://www.cnblogs.com/Mr-Rocker/p/6031096.html js清除浏览器缓存的几种方法 一.CSS和 ...
- js动态加载js文件(js异步加载之性能优化篇)
1.[基本优化] 将所有需要的<script>标签都放在</body>之前,确保脚本执行之前完成页面渲染而不会造成页面堵塞问题,这个大家都懂. 2.[合并JS代码,尽可能少的使 ...
随机推荐
- 使用 data.table 包操作数据
在第一节中,我们回顾了许多用于操作数据框的内置函数.然后,了解了 sqldf 扩展包,它使得简单的数据查询和统计变得更简便.然而,两种方法都有各自的局限性.使用内置函数可能既繁琐又缓慢,而相对于各式各 ...
- 阿里官方Java代码规范标准
阿里官方Java代码规范标准<阿里巴巴Java开发手册 终极版 v1.3.0>下载 https://www.cnblogs.com/han-1034683568/p/7680354.htm ...
- vuejs2点滴
在Vue定义一个不被添加getter setter 的属性: https://github.com/vuejs/vue/issues/1988 博客: 0.vux的x-input源码分析. http: ...
- 发票查验---异步处理多条记录---demo代码
/// 窗体加载事件 /// </summary> /// <param name="obj"></param> ...
- C# winform对话框用法大全
对话框中我们常用了以下几种:1.文件对话框(FileDialog) 它又常用到两个: 打开文件对话框(OpenFileDialog) 保存文件对话(SaveFileDialog)2.字体对话框(F ...
- English trip -- Phonics 3 元音字母e
xu言: 额...今天给我上自然拼读的maple老师 - . -和上次给我上第二集自然拼读的是同一个老师.突然考了考我上次学的内容~感觉大脑一片空白.看来review不能光说而不下苦功夫啊... 元音 ...
- 【异常】Application failed to start due to an exception org.springframework.beans.factory.BeanCurrentlyInCreationException
一. 异常信息: 2018-05-17 18:03:22.224 -DEBUG [ restartedMain] o.s.b.d.LoggingFailureAnalysisReporter ...
- 记录一个错误,在bundle install时候出现 shoulda-mathcers bundle install fails with git error
复制粘体错误到google.找到解决方案: https://github.com/thoughtbot/shoulda-matchers/issues/1057 GIT remote: https:/ ...
- Android之ToolBar的使用
Toolbar是在 Android 5.0 开始推出的一个 Material Design 风格的导航控件 ,Google 非常推荐大家使用 Toolbar 来作为Android客户端的导航栏,以此来 ...
- Confluence 6 自动添加用户到用户组
默认组成员(Default Group Memberships) 选项在 Confluence 3.5 及后续版本和 JIRA 4.3.3 及后续版本中可用.这字段将会在你选择 'Read Only, ...