====== Assets ====== Assets.js provides on-the-fly loading of images, css, and javascript files. Here is the [[http://docs.mootools.net/Plugins/Assets|documentation for Assets.js]]. ===== Assets.javascript ===== Returns a new script tag with the source and (optional) properties you specify. *Note* that it inserts the tag into the DOM (in the head) for you.


new Asset.javascript('/scripts/myScript.js', {id: 'myScript'})
//returns element:

===== Assets.css ===== Pretty much the same concept for css as for javascript. *Note* that it inserts the tag into the DOM (in the head) for you.


new Asset.css('/css/myStyle.css', {id: 'myStyle', title: 'myStyle'});
//returns element:

===== Assets.image ===== //Assets.image// is very similar to //Asset.css// or //.javascript//, but its goal is to preload the image, while returning an image HTML element.


new Asset.image('/images/myImage.png', {id: 'myImage', title: 'myImage', load: new myFunction});
//returns element

Note that this doesn't actually do anything with the returned element, you'll need to use //Element.injectBefore/injectAfter/injectInside/adopt/etc// to put it somewhere:


new Asset.image('http://www.clientcide.com/wp-content/themes/clientsidev2/art/logo.gif', {'id': 'logoAsset', 'title': 'logo example'}).injectInside('logoExample');

===== Asset.images ===== Preloads an array of images (as strings) and returns an array of img elements; does not inject them to the page.

var imgs = new Asset.images([urlOne, urlTwo, urlThree]);
imgs.each(function(img){img.injectInside(document.body)});