Skip to content

A tiny async loader / dependency manager for modern browsers (739 bytes)

License

Notifications You must be signed in to change notification settings

W1zzardTPU/loadjs

 
 

Repository files navigation

LoadJS

LoadJS is a tiny async loader for modern browsers (738 bytes).

Dependency Status devDependency Status CDNJS

Introduction

LoadJS is a tiny async loading library for modern browsers (IE9+). It has a simple yet powerful dependency management system that lets you fetch JavaScript and CSS files in parallel and execute code after the dependencies have been met. The recommended way to use LoadJS is to include the minified source code of loadjs.js in your <html> (possibly in the <head> tag) and then use the loadjs global to manage JavaScript dependencies after pageload.

LoadJS is based on the excellent $script library by Dustin Diaz. We kept the behavior of the library the same but we re-wrote the code from scratch to add support for success/error callbacks and to optimize the library for modern browsers. LoadJS is 738 bytes (minified + gzipped).

Here's an example of what you can do with LoadJS:

// define a dependency bundle
loadjs(['/path/to/foo.js', '/path/to/bar.js'], 'foobar');

// execute code elsewhere when the bundle has loaded
loadjs.ready('foobar', {
  success: function() { /* foo.js & bar.js loaded */ },
  error: function(depsNotFound) { /* foobar bundle load failed */ }
});

The latest version of LoadJS can be found in the dist/ directory in this repository:

You can also use it as a CJS or AMD module:

$ npm install --save loadjs
var loadjs = require('loadjs');

loadjs(['/path/to/foo.js', '/path/to/bar.js'], 'foobar');

loadjs.ready('foobar', {
  success: function() { /* foo.js & bar.js loaded */ },
  error: function(depsNotFound) {/* foobar bundle load failed */}
});

Browser Support

  • IE9+ (async: false support only works in IE10+)
  • Opera 12+
  • Safari 5+
  • Chrome
  • Firefox
  • iOS 6+
  • Android 4.4+

LoadJS also detects script load failures from AdBlock Plus and Ghostery in:

  • Safari
  • Chrome

Note: LoadJS treats empty CSS files as load failures in IE (to get around lack of support for onerror events on <link> tags)

Documentation

  1. Load a single file

    loadjs('/path/to/foo.js', {
      success: function() { /* foo.js loaded */}
    });
  2. Fetch files in parallel and load them asynchronously

    loadjs(['/path/to/foo.js', '/path/to/bar.js'], {
      success: function() { /* foo.js & bar.js loaded */ }
    });
  3. Fetch files in parallel and load them in series

    loadjs(['/path/to/foo.js', '/path/to/bar.js'], {
      success: function() { /* foo.js and bar.js loaded in series */ },
      async: false
    });
  4. Fetch JavaScript and CSS files

    loadjs(['/path/to/foo.css', '/path/to/bar.js'], {
      success: function() { /* foo.css and bar.js loaded */ }
    });
  5. Force treating file as CSS stylesheet

    loadjs(['css!/path/to/cssfile.custom'], {
      success: function() { /* cssfile.custom loaded as stylesheet */ }
    });
  6. Add a bundle id

    loadjs(['/path/to/foo.js', '/path/to/bar.js'], 'foobar', {
      success: function() { /* foo.js & bar.js loaded */ }
    });
  7. Check if bundle has already been defined

    if (!loadjs.isDefined('foobar')) {
      loadjs(['/path/to/foo.js', '/path/to/bar.js'], 'foobar', {
        success: function() { /* foo.js & bar.js loaded */ }
      });
    }
  8. Add an error callback

    loadjs(['/path/to/foo.js', '/path/to/bar.js'], 'foobar', {
      success: function() { /* foo.js & bar.js loaded */ },
      error: function(pathsNotFound) { /* at least one path didn't load */ }
    });
  9. Retry files before calling the error callback

    loadjs(['/path/to/foo.js', '/path/to/bar.js'], 'foobar', {
      success: function() { /* foo.js & bar.js loaded */ },
      error: function(pathsNotFound) { /* at least one path didn't load */ },
      numRetries: 3
    });
  10. Execute a callback before script tags are embedded

    loadjs(['/path/to/foo.js', '/path/to/bar.js'], {
      success: function() {},
      error: function(pathsNotFound) {},
      before: function(path, scriptEl) {
        /* called for each script node before being embedded */
        if (path === '/path/to/foo.js') scriptEl.crossOrigin = true;
      }
    });
  11. Bypass LoadJS default DOM insertion mechanism (DOM <head>)

    loadjs(['/path/to/foo.js'], {
      success: function() {},
      error: function(pathsNotFound) {},
      before: function(path, scriptEl) {
        document.body.appendChild(scriptEl);
      
        /* return `false` to bypass default DOM insertion mechanism */
        return false;
      }
    });
  12. Execute a callback after bundle finishes loading

    loadjs(['/path/to/foo.js', '/path/to/bar.js'], 'foobar');
    
    loadjs.ready('foobar', {
      success: function() { /* foo.js & bar.js loaded */ }
    });
  13. Chain .ready() together

    loadjs('/path/to/foo.js', 'foo');
    loadjs('/path/to/bar.js', 'bar');
    
    loadjs
      .ready('foo', {
        success: function() { /* foo.js loaded */ }
      })
      .ready('bar', {
        success: function() { /* bar.js loaded */ }
      });
  14. Compose more complex dependency lists

    loadjs('/path/to/foo.js', 'foo');
    loadjs('/path/to/bar.js', 'bar');
    loadjs(['/path/to/thunkor.js', '/path/to/thunky.js'], 'thunk');
    
    // wait for multiple depdendencies
    loadjs.ready(['foo', 'bar', 'thunk'], {
      success: function() {
        // foo.js & bar.js & thunkor.js & thunky.js loaded
      },
      error: function(depsNotFound) {
        if (depsNotFound.indexOf('foo') > -1) {};  // foo failed
        if (depsNotFound.indexOf('bar') > -1) {};  // bar failed
        if (depsNotFound.indexOf('thunk') > -1) {};  // thunk failed
      }
    });
  15. Use .done() for more control

    loadjs.ready(['dependency1', 'dependency2'], {
      success: function() {
        // run code after dependencies have been met
      }
    });
    
    function fn1() {
      loadjs.done('dependency1');
    }
    
    function fn2() {
      loadjs.done('dependency2');
    }
  16. Reset dependency trackers

    loadjs.reset();

Directory structure

loadjs/
├── dist
│   ├── loadjs.js
│   ├── loadjs.min.js
│   └── loadjs.umd.js
├── examples
├── gulpfile.js
├── LICENSE.txt
├── package.json
├── README.md
├── src
│   └── loadjs.js
├── test
└── umd-templates

Development Quickstart

  1. Install dependencies

  2. Clone repository

    $ git clone [email protected]:muicss/loadjs.git
    $ cd loadjs
  3. Install node dependencies using npm

    $ npm install
  4. Build examples

    $ npm run build-examples

    To view the examples you can use any static file server. To use the nodejs http-server module:

    $ npm install http-server
    $ npm run http-server -- -p 3000

    Then visit http://localhost:3000/examples

  5. Build distribution files

    $ npm run build-dist

    The files will be located in the dist directory.

  6. Run tests

    To run the browser tests first build the loadjs library:

    $ npm run build-tests

    Then visit http://localhost:3000/test

  7. Build all files

    $ npm run build-all

About

A tiny async loader / dependency manager for modern browsers (739 bytes)

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 97.6%
  • HTML 2.2%
  • CSS 0.2%