Dynamic Any Content Preloading Library – LoadAssets

LoadAssets is a small Vanilla JavaScript library that preloads any content (images, javascript, CSS, inline SVG) and dynamically adds them to the DOM when needed.

How to use it:

Just include the LoadAssets JavaScript library on the webpage and we’re ready to go.

<script src="dist/LoadAssets.js"></script>

Basic usage:

// LoadAssets Object
var loadAssets = new LoadAssets([{
  type: 'style',
  filename: 'style.css',
  order: 1
},{
  type: 'js',
  filename: 'test.js',
  order: 2
},{
  type: 'svg',
  filename: 'images',
  target: '.advance',
  hasFallback: true
},{
  type: 'image',
  filename: 'img.png'
}], function(object) {
  console.info('Count: '+loadAssets.count, object);
  // This is already cached
  document.querySelector('.javascript')
          .insertAdjacentHTML('beforeend', '<img src="img.png">')
});
// Inject the assets
loadAssets.startLoad();

LoadAssets(listAssets, callbackLoad, assetsRoot):

• listAssets : List of objects with parameters for each file
• callbackLoad : Callback for each asset loaded
• assetsRoot : Relative or absolute path from the root of assets

get(url, callback, errorCallback, async): Load data from the server using a HTTP GET request.

• url : A string containing the URL to which the request is sent.
• callback : A callback function that is executed if the request succeeds.
• errorCallback : A function to be called if the request fails.
• async : Parameter that defines whether the request is synchronous or asynchronous

isSvgAble: Test if the browser is capable of use inline SVG.

loadCss(object, callback): Loads and inserts the contents of a style in the DOM:

• object : Object configured for asset loading
• callback : A callback function that is executed if the request succeeds

loadImage(object, callback):

• object : Object configured for asset loading
• callback : A callback function that is executed if the request succeeds

loadScript(object, callback): Loads and inserts the contents of a script in the DOM:

• object : Object configured for asset loading
• callback : A callback function that is executed if the request succeeds

loadSVG(object, callback): Loads and inserts the contents of a svg into the DOM:

• object : Object configured for asset loading
• callback : A callback function that is executed if the request succeeds

startLoad: Starts loading the files.

validateObject(obj): Checks whether the object has the necessary properties to be used:

• obj : The object that is loaded

injectElements(allElements, callback): Injects the elements loaded in the DOM:

• allElements : Loaded elements
• callback : A callback function that is executed if the process succeeds.

putInOrder(object, callback): Sorts the elements loaded:

• obj : The object that is loaded
• callback : A callback function that is executed if the process succeeds.