MooPreload
MooPreload is a heavy duty MooTools plugin for preloading asset files and AJAX content all combined together with handy helper methods and events (callbacks).
Last Updated
This page was last updated on March 17th 2011 and was first published on January 30th 2011.
Table of Contents
About
MooPreload works by wrapping together the complex browser specific hacks for preloading asset files such as JavaScript, CSS, Images as well as AJAX content such as JSON and JSONP responses, XML, HTML as well as plain text. Cross-Website AJAX is also supported by use of YQL (however, a custom proxy address can be defined).
Requirements
MooTools Core 1.2 or 1.3 (compatibility mode works as well).
Supported Formats
MooPreload supports preloading of the following formats:
| Format | Class | onSuccess | onFailure | onRequest | onComplete | onTimeout |
|---|---|---|---|---|---|---|
| HTML AJAX Request | MooPreload.HTMLFile | Provided natively by MooTools | ||||
| Cross-Site AJAX | MooPreload.YQLHTMLFile | Yes | Yes | Yes | Yes | Yes |
| JSON Ajax Request | MooPreload.JSONFile | Provided natively by MooTools | ||||
| JSONP Request | MooPreload.JSONPFile | Yes | Yes | Yes | Yes | Yes |
| XML Ajax Request | MooPreload.XMLFile | Provided natively by MooTools | ||||
| JavaScript Request | MooPreload.JSFile | Yes | Yes | Yes | Yes | Yes |
| CSS StyleSheet File | MooPreload.CSSFile | Yes | Yes | Yes | Yes | Yes |
| Image File | MooPreload.Image | Yes | Yes | Yes | Yes | Yes |
| IFrame | MooPreload.IFrame | Provided natively by MooTools | ||||
Simple Usage
To use MooPreload, just include the MooTools core and the MooPreload JavaScript files and then apply the code where needed:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="moopreload.js"></script>
<script type="text/javascript">
window.addEvent('domready',function() {
//preload some magical CSS file
$moopreload('path/to/asset/file.css').chain(function() {
alert('preload complete!');
})
});
</script>
Advanced Usage
Multiple Helper Files
All preloadable content can be merged together for a massive preload procedure:
$moopreload(['file1.js','http://www.somewebsite.com/css/stylesheet.css'],{
onComplete:function(items) {
//all done!
},
onProgress:function(item,status,percentage) {
//ooooo! one by one
percentage *= 100;
alert('we are '+percentage+'% complete!');
}
});
Issues
…
Demos
Coming Soon!
Download
The moopreload.js files can be found on github.
Contact
Any issues or questions can be posted on the issue tracking page found on github.