dysel

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