pre.js
Use pre.js to load your JS and CSS files efficiently. Perfect for mobile apps and sites where 3G can often fail.
- Petite: only 2.5kb gzipped.
- Resilient: Auto-retries downloads when they fail.
- Efficient: Downloads files in parallel.
;
Usage
Use index.min.js.
pre.js is available via bower and npm.
$ bower install --save pre-js
$ npm install --save pre-js
Recommended use
Create a file like load.js
, which contains pre.js and your loader code.
Use whatever build tool you prefer to do this for you. This gets you a small
<4kb
loader you can use as a "gateway" to the rest of your app.
With Webpack or Browserify, it probably will be like this:
/* load.js */var Pre = ; ;
API reference
See pre.js's inline comments for more info. Here's a quick reference of the API:
/* * sets the maximum number of retries before giving up. */ /* * loads JavaScript assets. if the function returns a falsy value, it's * assumed that the loading failed, and will try again. */ /* * defines callbacks to execute. * these will run after the immediately-preceding `.js` or `.css` file is * loaded. you can use as many .then() blocks as you like, inserted at * different points. */ /* * loads CSS files. */ /* * preloads assets (like images and fonts). */ /* * reports progress. */ /* * reports retries and failures when they happen. */ /* * Conditionals: runs the function block if `condition` is true. */
Conditional loading
Simple:
For more complicated things:
CoffeeScript
Better with CoffeeScript, if that's your thing:
Pre css 'style.css' js 'jquery.js'-> jQuery? js 'app.js'-> App? then -> Appstart
Acknowledgements
pre.js © 2014, Rico Sta. Cruz. Released under the MIT License.
Includes code from yepnope.js, released under WTFPL. © 2012 Alex Sexton & Ralph Holzmann.
Authored and maintained by Rico Sta. Cruz with help from contributors.
- My website (ricostacruz.com)
- Github (@rstacruz)
- Twitter (@rstacruz)