Author: | penseadvance |
---|---|
Views Total: | 271 views |
Official Page: | Go to website |
Last Update: | April 19, 2016 |
License: | MIT |
Preview:

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.