Method will try to guess asset type by its extension. You can prefix any asset URL with js!, css!, img! or async! to force specific resource type loading.
options
Type: String|Array|Object Required
Options defined as Object
url
Type: String|Array Required
Single or multiple assets to load.
cache
Type: Boolean
Default: true
Cache assets or request new version every time by appending query string with timestamp.
success
Type: Function
Callback after everything has been successfully loaded.
error
Type: Function
Callback if (some) resources haven’t successfully loaded.
success
Type: Function
Callback after everything has been successfully loaded.
Aliases
For convenience, aliases for supported asset types are provided. They will always force loading with preferred method (regardless of setting).
.loadScript(options, [success])
Loads script (JS) assets.
.loadStyle(options, [success])
Loads style (CSS) assets.
.loadImage(options, [success])
Loads image assets.
.loadText(options, [success])
Loads text assets.
.loadAsync(options, [success])
Loads assets "async way" (e.g. 3rd party SDKs such as Facebook or Google+ SDK).
Examples
JS assets
var loader =require('kist-loader');
loader
.load('x.js')
.done(function(js){
console.log('Asset x.js loaded.');
})
.fail(function(js){
console.log('Asset x.js loading failed.');
});
loader
.load(['x.js','y.js'])
.done(function(js1,js2){
console.log('Assets x.js and y.js loaded.');
})
.fail(function(js1,js2){
console.log('Assets x.js and y.js loading failed.');
});
loader
.load('x.js',function(js){
console.log('Asset x.js loaded.');
});
loader
.load({
url:'x.js',
success:function(js){
console.log('Asset x.js loaded.');
},
error:function(js){
console.log('Asset x.js loading failed.');
}
});
CSS assets
var loader =require('kist-loader');
loader
.load('x.css')
.done(function(css){
console.log('Asset x.css loaded.');
})
.fail(function(css){
console.log('Asset x.css loading failed.');
});
loader
.load(['x.css','y.css'])
.done(function(css1,css2){
console.log('Assets x.css and y.css loaded.');
})
.fail(function(css1,css2){
console.log('Assets x.css and y.css loading failed.');
});
loader
.load('x.css',function(css){
console.log('Asset x.css loaded.');
});
loader
.load({
url:'x.css',
success:function(css){
console.log('Asset x.css loaded.');
},
error:function(css){
console.log('Asset x.css loading failed.');
}
});
Image assets
var loader =require('kist-loader');
loader
.load('x.png')
.done(function(img){
console.log('Asset x.png loaded.');
})
.fail(function(img){
console.log('Asset x.png loading failed.');
});
loader
.load(['x.png','y.png'])
.done(function(img1,img2){
console.log('Assets x.png and y.png loaded.');
})
.fail(function(img1,img2){
console.log('Assets x.png and y.png loading failed.');
});
loader
.load('x.png',function(img){
console.log('Asset x.png loaded.');
});
loader
.load({
url:'x.png',
success:function(img){
console.log('Asset x.png loaded.');
},
error:function(img){
console.log('Asset x.png loading failed.');
}
});
Text assets
var loader =require('kist-loader');
loader
.load('x.txt')
.done(function(txt){
console.log('Asset x.txt loaded.');
})
.fail(function(txt){
console.log('Asset x.txt loading failed.');
});
loader
.load(['x.txt','y.txt'])
.done(function(txt1,txt2){
console.log('Assets x.txt and y.txt loaded.');
})
.fail(function(txt1,txt2){
console.log('Assets x.txt and y.txt loading failed.');