我使用JavaScript加载器已经有几年了;无论是Dojo Loader,curl.js,还是使用 jQuery做为JavaScript loader,加载一组资源,一旦这些资源加载完成就给出响应,这是超级实用的。每个JavaScript loader都是功能强大,高效的,创建loader时浏览器不支持Promise API,loader可以代替Pormise API完成类似的工作。接下来的loader不属于该类型。 这个超级简单的loader使用 Promise API,成功或失败时触发回调,允许加载图片,CSS和javascript文件。这个小小的 "loader" (甚至不能称之为loader)不做:
这是小小的"loader"的所有荣耀:
var load = (function() {
// 返回一个函数的函数: https://davidwalsh.name/javascript-functions
function _load(tag) {
return function(url) {
// 这个promise使用Promise.all确定成功或失败
return new Promise(function(resolve, reject) {
var element = document.createElement(tag);
var parent = 'body';
var attr = 'src';
// promise重要的成功和失败
element.onload = function() {
resolve(url);
};
element.onerror = function() {
reject(url);
};
// 需要根据标签类型设置不同的属性
switch(tag) {
case 'script':
element.async = true;
break;
case 'link':
element.type = 'text/css';
element.rel = 'stylesheet';
attr = 'href';
parent = 'head';
}
// 注入文件以启动加载
element[attr] = url;
document[parent].appendChild(element);
});
};
}
return {
css: _load('link'),
js: _load('script'),
img: _load('img')
}
})();
// 用法: 用一个回调加载不同的文件类型
Promise.all([
load.js('lib/highlighter.js'),
load.js('lib/main.js'),
load.css('lib/highlighter.css'),
load.img('images/logo.png')
]).then(function() {
console.log('Everything has loaded!');
}).catch(function() {
console.log('Oh no, epic failure!');
});
load对象提供了js, css, 和 img函数,这些函数都可以接受一个URL并加载这个URL。每个函数都会返回一个Promise,资源标签的 onload 或 onerror 事件会触发对应promise的resolve 或 reject。Promise.all使这些资源集中加载,这些资源都加载成功会触发then,这些资源中有任何一个没有加载成功就会触发catch。 我要强调的是,这是一个非常非常简单的"loader";请不要评论为什么它没有其他加载器的花里胡哨的功能。 Promise API 使异步资源加载可管理,还有ServiceWorker API和fetch API,这些都是我喜欢的非常棒的API。帮自己一个忙来看看这些超级棒的API! (责任编辑:最模板) |

zencart羽绒服服装模板
人气:2116
ecshop梦芭莎分类不同展示
人气:630
ecshop仿优雅100家纺商城模
人气:681
乐到家手机数码商城|ecs
人气:548
ecshop高仿乐淘网上鞋城模
人气:1223
lightbox外贸模板|ecshop英文
人气:1120