如果不知道什么是Promise,可以先阅读:
/**
* 异步加载一个js文件并插入到页面头部
*
* @param {String} src js文件地址
*
* @return {Promise} 成功或失败时回调函数参数为新创建的script元素
*/
function loadScriptAsyn(src) {
return new Promise(function(resolve, reject) {
var script = document.createElement('script');
script.onload = function() {
resolve(script);
};
script.onerror = function() {
reject(script);
};
document.head.appendChild(script);
script.src = src;
});
}
/**
* 异步加载一个css文件并插入到页面头部
*
* @param {String} href css文件地址
*
* @return {Promise} 成功或失败时回调函数参数为新创建的link元素
*/
function loadCssAsyn(href) {
return new Promise(function(resolve, reject) {
var link = document.createElement('link');
link.type = "text/css";
link.rel = "stylesheet";
link.onload = function() {
resolve(link);
};
link.onerror = function() {
reject(link);
};
document.head.appendChild(link);
link.href = href;
});
}
/**
* 异步加载一张图片(一般用于预加载图片)
*
* @param {String} src 图片地址
*
* @return {Promise} 成功或失败时回调函数参数为新创建的img元素
*/
function loadImgAsyn(src) {
return new Promise(function(resolve, reject) {
var img = document.createElement('img');
img.onload = function() {
resolve(img);
};
img.onerror = function() {
reject(img);
};
img.src = src;
});
}
loadScriptAsyn('test1.js')
.then((element) => loadScriptAsyn('test2.js'))
.then((element) => loadScriptAsyn('test3.js'))
.then((element) => loadCssAsyn('body_red.css'))
.then((element) => loadImgAsyn('head.jpg'))
.then(function(element) { // 全部文件都加载成功
console.log('全部文件都按顺序加载完毕!');
})
.catch(function(element){ // 任一个文件加载出问题都会调用此函数,并会停止之后文件的加载
console.log(element + '加载出错');
});
注意:
(element) => loadScriptAsyn('test2.js')
这是js的箭头函数,相当于:
function(element) {
return loadScriptAsyn('test2.js');
}
Promise.all([
loadScriptAsyn('test1.js'),
loadScriptAsyn('test2.js'),
loadScriptAsyn('test3.js'),
loadCssAsyn('body_red.css'),
loadImgAsyn('head.jpg'),
])
.then(function(element) { // 全部文件都加载成功
console.log('全部文件都加载完毕!');
})
.catch(function(element){ // 任一个文件加载出问题都会调用此函数,不会影响其他文件的加载
console.log(element + '加载出错');
});
本文标签: JavaScript
哈哈哈,两个都点了