Dynamic Any Content Preloading Library – LoadAssets

Category: Javascript , Loading | April 19, 2016
Author: penseadvance
Views Total: 1,629
Official Page: Go to website
Last Update: April 19, 2016
License: MIT

Preview:

Dynamic Any Content Preloading Library – LoadAssets

Description:

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.

 

You Might Be Interested In:


Leave a Reply