Wondering what’s next for npm?Check out our public roadmap! »

    dysel

    1.0.0 • Public • Published

    DySEL - DYnamic Sequential Externals Loader

    DySEL is an asynchronous sequential resources (JavaScript and CSS) loader. It stacks resources and loads them so that the next resource is loaded only when the previous one is done.

    You can set a final callback that will execute at the end of all the loadings. You can set the noCache flag true if you want to reload for sure the resources. You can set the debug flag true if you want a minimal console feedback about what's going on.

    It works with javascript, css and, as bonus, with Google Fonts.

    Scenario example

    • You want to dynamically load a jQuery plugin only after jQuery itself is loaded.
    • You want to dynamically load css and javascript in a specific order, as fast as you can.
    • You want to dynamically load Google fonts as they specify.

    Usage

    We want to load Lobster Font and we want to use Smoke plugin for jQuery. Smoke requires jQuery and Bootstrap to work, so we need to load everything properly. That's how you can use DySEL for this:

    jsFiddle example

    Embed DySEL just like always

    <script type="text/javascript" src="dysel.js"></script>

    Use it

    const googleFont = 'https://fonts.googleapis.com/css?family=Lobster';
    const jquery = 'https://code.jquery.com/jquery.js';
    const bootstrapCss =
      'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css';
    const bootstrapJs =
      'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js';
    const smokeCss =
      'https://rawgit.com/alfredobarron/smoke/master/dist/css/smoke.min.css';
    const smokeJs =
      'https://rawgit.com/alfredobarron/smoke/master/dist/js/smoke.min.js';
    
    // push links into an array in the correct order
    const extRes = [
      googleFont,
      bootstrapCss,
      jquery,
      bootstrapJs,
      smokeCss,
      smokeJs,
    ];
    
    // let this happen
    dysel({
      links: extRes,
      callback: () => alert('everything is now loaded, this is awesome!'), // optional
      noCache: false, // optional
      debug: false, // optional
    });

    Example here

    License

    MIT license. See LICENSE

    Install

    npm i dysel

    DownloadsWeekly Downloads

    2

    Version

    1.0.0

    License

    MIT License

    Unpacked Size

    9.57 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar