The selector-based script loader
I'm on steroids (extends LABjs)
Only.js is a dynamic selector-based script loader that not only replaces the use of multiple <script> tags and initialization
code but also with a fast, parallel, speed-optimized API. Some script loaders tend to do a lot of things; from loading scripts, to loading css,
to feature detection, to loading iframes, images, maybe even solar systems — eventually.
The major characteristic of Only.js is not the ability to load all Javascript files in parallel with cross-browser execution order but the ability to dynamically determine and load Javascript needed by the current page without blocking other assets/resources.
NOTE: Only.js is ~2.5kb (minified + gzipped).
From LABjs Docs:
More on LABjs.com »LABjs is a dynamic script loader intended to replace the use of the ugly, non-performant
<script>tag with a flexible and performance-optimized alternative API.The defining characteristic of LABjs is the ability to load all JavaScript files in parallel, as fast as the browser will allow, but giving you the option to ensure proper execution order if you have dependencies between files.
Features
When you need a sleek, simple, solid, and lightweight cross-browser compatible loader, don't bang your head. Only.js is here to help you out !
- Load scripts asynchronously and in parallel, but execute them in order;
-
Conditional script loading if a selector is available;
- Test multiple selectors with AND -like condition [eg:
$O.test(['this', 'that']).js().wait()] - Test multiple selectors with OR -like condition [eg:
$O.test('this, that').js().wait()]
- Test multiple selectors with AND -like condition [eg:
- Manage script dependencies — execute callbacks once they are loaded;
- A mini modernizr — replaces .no-js to .js on the HTMLElement for CSS manipulations;
- Opt-in to fix quirks in all browsers with automatic polyfill insert via cdn.polyfill.io;
- Get old browsers to support HTML5 elements;
- Ability to use custom javascript attributes for loaded scripts;
- Uses an entry point initialization script via data-only for simplicity;
- The only script you'll ever need in your <html> (view page source).
How to use
Simply insert Only.js before the </head> (before <body>):
<script src="Only.min.js" data-only="init.js" asnyc></script>
The asnyc attribute will help to save on the blocking load of Only.min.js (~2.5kb gizipped) and also
ensure that Only.js is executed as soon as possible without blocking the downloads of other assets/resources.
Build Process
Our "official" build process uses gulp.
Custom builds »Protocol-relative URLs
Browsers have long supported "protocol-relative URLs", which basically means leaving off the "http:" or "https:" portion of a URL (leaving just the "//domain.tld/path/..." part), which causes that URL to be assumed to be the same protocol as the parent page. The benefit is that if you have a page that can be viewed in either HTTP or HTTPS, and your resources can (and need to be) served through either HTTP or HTTPS, respectively, you can simply list your URLs as protocol-relative and the browser will auto-select based on which protocol the page is viewed in.
Only.js now supports specifying such URLs to any script URL setting. NOTE: This is the recommended way to specify URLs for script resources if: a) the page you're serving can be viewed in both HTTP and HTTPS; and b) the script resource you're linking to can be accessed using the exact same domain/path with exception to the protocol.
A common example of such a resource is the CDN locations on the Google Ajax API, where popular frameworks like jQuery and Dojo are hosted. If you are linking to such CDN resources, you are strongly encouraged to change to using protocol-relative URLs, like "//ajax.googleapis.com/..." instead of "http://ajax.googleapis.com/..." or "https://ajax.googleapis.com/...".