lad

ladderized

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

Showing:

Popularity

Downloads/wk

31

GitHub Stars

0

Maintenance

Last Commit

4yrs ago

Contributors

0

Package

Dependencies

3

Size (min+gzip)

1.2KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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

Exposed Window Objects / Components

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100