按顺序动态加载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代码,尽可能少的使 ...
随机推荐
- xtu 1242 Yada Number 打表
Yada Number Time Limit : 2000 MS Memory Limit : 65536 KB Yada Number Problem Description: ...
- Cocos2d-x学习笔记(二)AppDelegate类详解
由源代码,可得到如下的类继承关系: 1. 在方法applicationDidFinishLaunching中,首先会调用CCDirector* pDirector = CCDirector::shar ...
- 团队作业Beta冲刺-第三天
2018.06.26 各个成员完成任务 成员 今日完成任务 贡献小时数 龙正圆 后台程序完善 5h 杨环宇 后台程序完善 4h 马军.龚继恒 界面美化 2h 候燕.纪亚星 Beta冲刺博客的撰写 3h ...
- spring boot 开发 ajax返回值报错
org.thymeleaf.exceptions.TemplateInputException: Error resolving template "succeed", templ ...
- Codeforces 847I - Noise Level
847I - Noise Level 思路:bfs. 代码: #include<bits/stdc++.h> using namespace std; #define ll long lo ...
- webpack4试水总结
看了官方的升级通告,据说webpack4的打包效率提升近一倍,于是最近在项目分支上升级了下webpack4,过程中的一些报错及问题简单整理下,以供交流. 在之前的旧项目上单纯的升级webpack版本后 ...
- English trip -- VC(情景课)8 D Reading
Listen and read. Shop Smart [smɑːt] Employee of the Month: Sara['særə] (萨拉) Lopez(洛佩斯) Congratulati ...
- 20170622xlVBA多部门分类汇总同类合并单元格
Public Sub Basic_CodeFrame() AppSettings On Error GoTo ErrHandler Dim StartTime, UsedTime As Variant ...
- fzu1901 kmp
For each prefix with length P of a given string S,if S[i]=S[i+P] for i in [0..SIZE(S)-p-1], then the ...
- sql 智能提示
依次打开SSMS—>工具—>选项—>文本编辑器—>Transact-SQL—>IntelliSense—>检查右侧窗体是否启用!!