A featured-packed loader w/o the need for jQuery; for loading js files & css files, etc.
npm install ladderized
$ npm install ladderized@latest --save
`
From CDN
`
`
Usage
- The "/dist" folder contains the compiled & minified js files
- The "/demo" folder contains example usage
Running the Demo
`
// At CMD or Terminal:
git clone https://github.com/clusteratlas/ladderized
cd ladderized
npm install
cd demo
node index.js
// Demo shall now viewable at http://localhost/ (port 80, by default)
`
Basics, Series Loading
`
`
Parallel Loading, Error Handling & Nanobar
`
`
Sample usage
`
Ladderized
.css({
link: 'https://unpkg.com/materialize-css/dist/css/materialize.min.css'
})
.load(function(){
Ladderized
.clearQueue()
.showNanoBar()
.js({
link: 'https://unpkg.com/jquery/dist/jquery.min.js'
})
.js({
link: 'https://unpkg.com/materialize-css/dist/js/materialize.min.js'
})
.load(function(){
console.log('All files loaded!');
});
});
`
Other Notes
HTTP/2 For Efficiency
- Serve from servers with HTTP/2 support for major advantage
- Info here: https://http2.github.io/faq/
- Test tool here: https://tools.keycdn.com/http2-test
- CDN's like unpkg.com & cdnjs.com uses this.
Exposed Window Objects / Components
- "window.Ladderized"
- Our main module, which provides chainable progressive loading w/ optional callbacks.
- "window.onceDocumentIsReady"
- It works similarly to jQuery's $(document).ready(), but this is a small single standalone function that does not require jQuery in any way.
- https://github.com/DanAtkinson/docReady
- "window.Loader"
- englercj's Resource Loader
- https://github.com/englercj/resource-loader
- http://englercj.github.io/resource-loader/index.html
- "window.Nanobar"
- Extra-lightweight progress bars
- http://nanobar.jacoborus.codes/
- https://github.com/jacoborus/nanobar
Other Methods
`
// Use clearQueue method for a reset; can also be chained.
Ladderized
.clearQueue()
// Use the standalone loaders for manual loading.
Ladderized.loaders.js(link[string], onLoad[function], onError[function])
Ladderized.loaders.css(link[string], onLoad[function], onError[function])
Ladderized.loaders.resource(name[string], link[string], onLoad[function], onError[function])
``