Ladderized

The featured-packed native loader of JS, CSS, and any type of files for mobile & desktop browsers.

• You can load resources from local directory, or from CDN's
• Supports series (one-by-one) loading of files
• Supports parallel (regardless of order) loading of files
• Cross Origin is automatically detected on resource loading
• Supports callback on loading success, through "onLoad" property
• Supports callback on loading error, through "onError" property

Installation

From NPM

$ npm install ladderized@latest --save

<!-- From node_modules directory -->
<script src="./node_modules/ladderized/dist/ladderized.min.js"></script>

From CDN

<!-- From unpkg.com CDN, latest version by default -->
<script src="https://unpkg.com/ladderized/dist/ladderized.min.js"></script>

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

<script src="https://unpkg.com/ladderized/dist/ladderized.min.js"></script>
<script>
	Ladderized
		.js({
			link: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js',
			onLoad: function () {
				console.log('jquery loaded!');
			}
		})
		.css({
			link: 'https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css'
		})
		.js({
			link: 'https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js'
		})
		.resource({
			name: 'descartes',
			link: 'https://upload.wikimedia.org/wikipedia/commons/7/73/Frans_Hals_-_Portret_van_Ren%C3%A9_Descartes.jpg',
			onLoad: function (resource, url) {
				var img = document.createElement('img');
				document.body.appendChild(img);
				img.src = url;
			}
		})
		.load(function(){
			console.log('all files loaded!');
		});
</script>

Parallel Loading, Error Handling & Nanobar

<script src="https://unpkg.com/ladderized/dist/ladderized.min.js"></script>
<script>
	Ladderized
		.showNanoBar()
		.js({
			link: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js',
			onLoad: function () {
				console.log('jquery loaded!');
			}
		})
		.js({
			link: './nonexistent.js',
			onError: function () {
				console.log('error loading js file!');
			}
		})
		.css({
			link: './nonexistent.css',
			onError: function () {
				console.log('error loading css!');
			}
		})
		.resource({
			name: 'nonexistentfile',
			link: 'https://uploadz.wikimedia.org/nonexistent.jpg',
			onLoad: function () {
				console.log('successfully loaded file!');
			},
			onError: function () {
				console.log('error loading file!');
			}
		})
		.resource({
			name: 'descartes1',
			link: 'https://upload.wikimedia.org/wikipedia/commons/7/73/Frans_Hals_-_Portret_van_Ren%C3%A9_Descartes.jpg?dawd2',
			onLoad: function () {
				console.log('successfully loaded descartes1!');
			},
			onError: function () {
				console.log('error loading descartes1!');
			}
		})
		.parallel({
			js: [
				'https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js'
			],
			css: [
				'https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css'
			],
			resources: [
				{
					name: 'descartes2',
					link: 'https://upload.wikimedia.org/wikipedia/commons/7/73/Frans_Hals_-_Portret_van_Ren%C3%A9_Descartes.jpg'
				}
			]
		})
		.load(function(resources){
			var img = document.createElement('img');
			document.body.appendChild(img);
			img.src = resources.descartes1.objectURL;
			var img = document.createElement('img');
			document.body.appendChild(img);
			img.src = resources.descartes2.objectURL;
			console.log('resources:', resources);
			console.log('all files loaded!');
		});
</script>

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])

Testing

• N/A

License

MIT � clusteratlas