ladderized

    4.0.1 • Public • Published

    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

    Install

    npm i ladderized

    DownloadsWeekly Downloads

    7

    Version

    4.0.1

    License

    MIT

    Last publish

    Collaborators

    • clusteratlas