脚本加载后执行JS回调函数的方法
动态脚本简单示例
// IE下:
var HEAD = document.getElementsByTagName('head')[0] || document.documentElement
var src = 'http://xxxxxx.com'
var script = document.createElement('script')
script.setAttribute('type', 'text/javascript')
script.onreadystatechange = function() {
if (this.readyState === 'loaded' || this.readyState === 'complete') {
console.log('加载成功!')
}
}
script.setAttribute('src', src)
HEAD.appendChild(script)
// Chrome等现代浏览器:
var HEAD = document.getElementsByTagName('head')[0] || document.documentElement;
var src = 'http://xxxxxx.com'
var script = document.createElement('script')
script.setAttribute('type', 'text/javascript')
script.onload = function() {
console.log('加载成功!')
}
script.setAttribute('src', src)
HEAD.appendChild(script)
串行和并行动态脚本
/**
* 串行加载指定的脚本
* 串行加载[异步]逐个加载,每个加载完成后加载下一个
* 全部加载完成后执行回调
* @param {Array|String} scripts 指定要加载的脚本
* @param {Function} callback 成功后回调的函数
* @return {Array} 所有生成的脚本元素对象数组
*/
function seriesLoadScripts(scripts, callback) {
if(typeof(scripts) !== 'object') {
var scripts = [scripts];
}
var HEAD = document.getElementsByTagName('head')[0] || document.documentElement;
var s = [];
var last = scripts.length - 1;
//递归
var recursiveLoad = function(i) {
s[i] = document.createElement('script');
s[i].setAttribute('type','text/javascript');
// Attach handlers for all browsers
// 异步
s[i].onload = s[i].onreadystatechange = function() {
if(!/*@cc_on!@*/0 || this.readyState === 'loaded' || this.readyState === 'complete') {
this.onload = this.onreadystatechange = null;
this.parentNode.removeChild(this);
if(i !== last) {
recursiveLoad(i + 1);
} else if (typeof(callback) === 'function') {
callback()
};
}
}
// 同步
s[i].setAttribute('src', scripts[i]);
HEAD.appendChild(s[i]);
};
recursiveLoad(0);
}
/**
* 并行加载指定的脚本
* 并行加载[同步]同时加载,不管上个是否加载完成,直接加载全部
* 全部加载完成后执行回调
* @param {Array|String} scripts 指定要加载的脚本
* @param {Function} callback 成功后回调的函数
* @return {Array} 所有生成的脚本元素对象数组
*/
function parallelLoadScripts(scripts, callback) {
if(typeof(scripts) !== 'object') {
var scripts = [scripts];
}
var HEAD = document.getElementsByTagName('head')[0] || document.documentElement;
var s = [];
var loaded = 0;
for(var i = 0; i < scripts.length; i++) {
s[i] = document.createElement('script');
s[i].setAttribute('type','text/javascript');
// Attach handlers for all browsers
// 异步
s[i].onload = s[i].onreadystatechange = function() {
if(!/*@cc_on!@*/0 || this.readyState === 'loaded' || this.readyState === 'complete') {
loaded++;
this.onload = this.onreadystatechange = null;
this.parentNode.removeChild(this);
if(loaded === scripts.length && typeof(callback) === 'function') callback();
}
};
// 同步
s[i].setAttribute('src',scripts[i]);
HEAD.appendChild(s[i]);
}
}
使用方法
var scripts = [
"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js",
"http://wellstyled.com/files/jquery.debug/jquery.debug.js"
];
// 这两个文件分别是 jQuery 1.4.的库文件和 jQuery Debug 插件
// 然后你可以使用下面的方法调用并在成功后执行回调了。
parallelLoadScripts(scripts, function() {
/*
debug = new $.debug({
posTo : { x:'right', y:'bottom' },
width: '480px',
height: '50%',
itempider : '<hr>',
listDOM : 'all'
});
*/
console.log('脚本加载完成啦');
});
扩展知识
脚本加载后执行JS回调函数的方法的更多相关文章
- JQuery文档加载完成执行js的几种方法
js中文档加载完毕.一般在body加一个onload事件或者window.onload = function () {} jQuery中有好多写法,平时也不注意,别人一问,还真觉得头大. 下面是我整理 ...
- 使用getScript()方法异步加载并执行js文件
使用getScript()方法异步加载并执行js文件 使用getScript()方法异步请求并执行服务器中的JavaScript格式的文件,它的调用格式如下所示: jQuery.getScript(u ...
- JS脚本加载与执行对性能的影响
高性能JavaScript-JS脚本加载与执行对性能的影响 在web产品优化准则中,很重要的一条是针对js脚本的加载和执行方式的优化.本篇文章简单描述一下其中的优化准则. 1. 脚本加载优化 1.1 ...
- 浏览器环境下Javascript脚本加载与执行探析之DOMContentLoaded
在”浏览器环境下Javascript脚本加载与执行探析“系列文章的前几篇,分别针对浏览器环境下JavaScript加载与执行相关的知识点或者属性进行了探究,感兴趣的同学可以先行阅读前几篇文章,了解相关 ...
- 浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
在<浏览器环境下JavaScript脚本加载与执行探析之defer与async特性>中,我们研究了延迟脚本(defer)和异步脚本(async)的执行时机.浏览器支持情况.浏览器bug以及 ...
- C# dll 事件执行 js 回调函数
C# dll 事件执行 js 回调函数 前言: 由于js 远程请求 XMLHttpRequest() 不支持多线程,所以用C# 写了个dll 多线程远程抓住供js调用. 最初代码为: C#代 ...
- 浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
defer和async特性相信是很多JavaScript开发者"熟悉而又不熟悉"的两个特性,从字面上来看,二者的功能很好理解,分别是"延迟脚本"和"异 ...
- 高性能JavaScript-JS脚本加载与执行对性能的影响
在web产品优化准则中,很重要的一条是针对js脚本的加载和执行方式的优化.本篇文章简单描述一下其中的优化准则. 1. 脚本加载优化 1.1 脚本位置对性能的影响 优化页面加载性能的原则之一是将scri ...
- spring bean容器加载后执行初始化处理@PostConstruct
先说业务场景,我在系统启动后想要维护一个List常驻内存,因为我可能经常需要查询它,但它很少更新,而且数据量不大,明显符合缓存的特质,但我又不像引入第三方缓存.现在的问题是,该List的内容是从数据库 ...
随机推荐
- Linux graphics stack
2D图形架构 早期Linux图形系统的显示全部依赖X Server,X Client调用Xlib提供的借口向 X Server发送渲染命令,X Server根据 X Client的命令请求向硬件设备绘 ...
- STM32学习笔记——序言
写AVR已经两年了.如果初中时候玩Arduino也算的话,就是6年. 两年以来,我用AVR单片机完成了两个大项目: AVR单片机教程,一时兴起写的,效果不好: MEDS,参赛用的课题,半完成,比赛都结 ...
- 聊聊Dotnet的垃圾回收
最近在做一个项目,用到了大量的非托管技术,所以垃圾回收变得很重要. 在说垃圾回收之前,先说说两个概念: 托管代码,是由CLR管理的代码 非托管代码,是由操作系统直接执行的代码 在早期C++的时候, ...
- POJ-2349(kruskal算法+最小生成树中最大边的长度)
Arctic POJ-2349 这题是最小生成树的变形题目.题目的意思是已经有s个卫星频道,这几个卫星频道可以构成一部分的网络,而且不用费用,剩下的需要靠d的卫星接收器.题目要求的就是最小生成树中,最 ...
- POJ-1062(原始dijiksra算法+思维)
昂贵的婚礼 POJ-1062 这道题目一开始看的时候难以理解,但是仔细想,还是可以和最短路联系的,我觉得类似于硬币交换等问题. 以下需要注意几个点,第一就是因为题目规定如何和超出了等级限制的人交易,则 ...
- HDOJ-6628(dfs+第k字典序最小差异序列)
permutation 1 HDOJ-6628 这题使用的暴力深搜,在dfs里面直接从最小的差异开始枚举 注意这里的pre记录前一个数,并且最后答案需要减去排列中最小的数再加一 这里有一个技巧关于求第 ...
- Mybatis系列全解(七):全息视角看Dao层两种实现方式之传统方式与代理方式
封面:洛小汐 作者:潘潘 一直以来 他们都说为了生活 便追求所谓成功 顶级薪水.名牌包包 还有学区房 · 不过 总有人丢了生活 仍一无所获 · 我比较随遇而安 有些事懒得明白 平日里问心无愧 感兴趣的 ...
- MyBatis(八):MyBatis插件机制详解
MyBatis插件插件机制简介 MyBatis插件其实就是为使用者提供的自行拓展拦截器,主要是为了可以更好的满足业务需要. 在MyBatis中提供了四大核心组件对数据库进行处理,分别是Exec ...
- 字符串匹配-BF算法和KMP算法
声明:图片及内容基于https://www.bilibili.com/video/av95949609 BF算法 原理分析 Brute Force 暴力算法 用来在主串中查找模式串是否存以及出现位置 ...
- gsoap多wsdl集成
gsoap常规用法: 通过wsdl文件创建头文件 //通过wsdl文件创建头文件 wsdl2h [options] -o file.h ... WSDL and XSD files or URLs t ...