Provides functions for the dynamic loading and management of JavaScript, CSS, and image files.
Injects a script tag into the head section of the document, pointing to the src specified.
Syntax
var myScript = Asset.javascript(source[, properties]);
Arguments
- source - (string) The location of the JavaScript file to load.
- properties - (object, optional) Additional attributes to be included into the script Element; this is the same as the second argument you might pass to including the Element constructor with the exception of Events (see note)
- onLoad - (function) A function that will be invoked when the JavaScript is loaded.
- document - (object, defaults to
document
) The document which the JavaScript should be injected in.
Returns
- (element) A new script Element.
Examples
var myScript = Asset.javascript('/scripts/myScript.js', {
id: 'myScript',
onLoad: function(){
alert('myScript.js is loaded!');
}
});
Note
- WARNING: DO NOT use addEvent for load on the returned element, give it as onLoad in the properties argument.
Injects a css file in the page.
Syntax
var myCSS = Asset.css(source[, properties]);
Arguments
- source - (string) The path of the CSS file.
- properties - (object) Some additional attributes you might want to add to the link Element; this is the same as the second argument you might pass to including the Element constructor. For instance you might specify a title attribute or perhaps an id.
- onLoad - (function) A function that will be invoked when the CSS is loaded.
- timeout - (number, defaults to 3000 ms) The maximum amount of milliseconds to wait for onLoad callback to be called.
- document - (object, defaults to
document
) The document which the link element should be injected in.
Returns
- (element) A new link Element.
Examples
var myCSS = Asset.css('/css/myStyle.css', {id: 'myStyle', title: 'myStyle'});
Preloads an image and returns the img element.
Syntax
var myImage = Asset.image(source[, properties]);
Arguments
- source - (string) The path of the image file.
- properties - (object) Some additional attributes you might want to add to the img Element.
- onLoad - (function) A function that will be invoked when the image is loaded.
- onError - (function) A function that will be invoked when the image failed loading.
- onAbort - (function) A function what will be invoked when the loading is aborted.
Returns
- (element) A new HTML img Element.
Examples
var myImage = Asset.image('/images/myImage.png', {
id: 'myImage',
title: 'myImage',
onLoad: myFunction
});
Notes
- Does not inject the image into the page.
- WARNING: DO NOT use addEvent for load/error/abort on the returned element, give them as onLoad/onError/onAbort in the properties argument.
Preloads an array of images (as strings) and returns an array of img elements. does not inject them to the page.
Syntax
var myImages = Asset.images(source[, options]);
Arguments
- sources - (mixed) An array or a string, of the paths of the image files.
- options - (object, optional) See below.
Options
- properties - (object) Some additional attributes for all the images (same as the second argument you might pass to Asset.image).
Events
complete
- (function) Executes when all image files are loaded.
Signature
onComplete()
progress
- (function) Executes when one image file is loaded.
Signature
onProgress(counter, index, source)
Arguments
- counter - (number) The number of loaded images.
- index - (number) The index of the loaded image.
- source - (string) The path of the image file.
error
- (function) Executes when one image file fails to load.
Signature
onError(counter, index, source)
Arguments
- counter - (number) The number of errored images.
- index - (number) The index of the errored image.
- source - (string) The path of the image file.
Returns
- (array) An Elements collection.
Examples
var myImages = Asset.images(['/images/myImage.png', '/images/myImage2.gif'], {
properties: {
'class': 'myImage',
title: 'myImage'
},
onComplete: function(){
alert('All images loaded!');
}
});