项目中经常会遇到这样的问题:当某个js脚本加载完成后再执行相应任务,但很多朋友可能并不知道怎么判断我们要加载的js文件是否加载完成,如果没有加载完成我们就调用js文件里面的函数是不会成功的。本文主要讲解怎么在成功加载js文件后再执行相应回调任务。
我们可以动态的创建<代码> & lt; script> 元素,然后通过更改它的src属性来加载脚本,但是怎么知道这个脚本文件加载完成了呢?因为有些函数需要在脚本加载完成才能调用.IE浏览器中可以使用<代码> & lt; script><代码> 元素的onreadystatechange> //例如下:
var=document.getElementsByTagName头(头)[0]| | document.documentElement
var src=" http://xxxxxx.com "=document.createElement var脚本(脚本)
script.setAttribute('类型',' text/javascript ')
脚本。onreadystatechange=function () {
如果这一点。readyState===凹釉亍眧 |。readyState==='完成'){
console.log('加载成功!”)
}
}
脚本。setAttribute (“src”, src)
HEAD.appendChild(脚本)//铬等现代浏览器:
var=document.getElementsByTagName头(头)[0]| | document.documentElement;
var src=" http://xxxxxx.com "=document.createElement var脚本(脚本)
script.setAttribute('类型',' text/javascript ')
脚本。onload=function () {
console.log('加载成功!”)
}
脚本。setAttribute (“src”, src)
HEAD.appendChild(脚本)
原理很简单,根据这两个简单的原理,我们进行一些修改,我把改成了两个函数,分别是串行加载和并行加载。
当传一个包含多个JS文件路径的数组时,串行加载函数从第一个脚本文件加载开始,每加载成功一个便开始加载下一个脚本文件,全部加载完成后执行回调函数。而并行加载是一开始便加载全部的脚本文件,也就是他们从同一点开始加载,当全部加载完成后,执行回调函数。
/* *
*串行加载指定的脚本
*串行加载(异步]逐个加载,每个加载完成后加载下一个
*全部加载完成后执行回调
* @param{字符串数组|}脚本指定要加载的脚本
* @param}{函数回调成功后回调的函数
* @return数组{}所有生成的脚本元素对象数组
*/函数seriesLoadScripts(脚本、回调){
如果(typeof(脚本)!=='对象'){
var=脚本(脚本);
}
var=document.getElementsByTagName头(头)[0]| | document.documentElement;
var s=[];
var=脚本。长度- 1;//递归
var recursiveLoad=function (i) {
[我]=document.createElement(“脚本”);
[我].setAttribute('类型',' text/javascript ');//附加处理程序为所有浏览器//异步
[我]。onload=s[我]。onreadystatechange=function () {
如果(/* @cc_on !@ */0 | |。readyState===凹釉亍眧 |。readyState==='完成'){
这一点。onload=nreadystatechange=零;
this.parentNode.removeChild(这个);
如果(我!==){
recursiveLoad (i + 1);
}else if (typeof(回调)===昂?{
回调()
};
}
}//同步
[我]。脚本setAttribute (“src”,[我]);
HEAD.appendChild (s[我]);
};
recursiveLoad (0);
}/* *
*并行加载指定的脚本
*并行加载(同步]同时加载,不管上个是否加载完成,直接加载全部
*全部加载完成后执行回调
* @param{字符串数组|}脚本指定要加载的脚本
* @param}{函数回调成功后回调的函数
* @return数组{}所有生成的脚本元素对象数组
*/函数parallelLoadScripts(脚本、回调){
如果(typeof(脚本)!=='对象'){
var=脚本(脚本);
}
var=document.getElementsByTagName头(头)[0]| | document.documentElement;
var s=[];
var加载=0;
(var=0;我& lt;scripts.length;我+ +){
[我]=document.createElement(“脚本”);
[我].setAttribute('类型',' text/javascript ');//附加处理程序为所有浏览器//异步
[我]。onload=s[我]。onreadystatechange=function () {
如果(/* @cc_on !@ */0 | |。readyState===凹釉亍眧 |。readyState==='完成'){
加载+ +;
这一点。onload=nreadystatechange=零;
this.parentNode.removeChild(这个);
如果(===加载脚本。长度,,typeof(回调)===昂?回调();
}
};//同步
[我].setAttribute (“src”,脚本[我]);
HEAD.appendChild (s[我]);
}
}
