Precarga dinámica de cualquier biblioteca LoadAssets

Vista prévia

Descripción

LoadAssets es una pequeña biblioteca de JavaScript Vanilla que precarga cualquier contenido (imágenes, JavaScript, CSS, SVG en línea) y los agrega dinámicamente al DOM cuando es necesario.

Funcionamiento

Sólo tiene que incluir la biblioteca de JavaScript LoadAssets en la página web y estamos listos para ir.

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

Uso básico:

// 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: Lista de objetos con parámetros para cada archivo
• callbackLoad: Devolución de llamada para cada activo cargado
• assetsRoot: Ruta relativa o absoluta desde la raíz de los activos

get (URL, callback, errorCallback, Async): Cargue datos desde el servidor mediante una solicitud HTTP GET.

• URL: Una cadena que contiene la dirección URL a la que se envía la solicitud.
• callback: Una función de devolución de llamada que se ejecuta si la solicitud se realiza correctamente.
• errorCallback: Una función que se llamará si se produce un error en la solicitud.
• Async: Parámetro que define si la solicitud es sincrónica o asincrónica

isSvgAble: Pruebe si el navegador es capaz de utilizar SVG en línea.

loadCss (Object, callback): carga e inserta el contenido de un estilo en el DOM:

• objeto: Objeto configurado para la carga de activos
• callback: Una función de devolución de llamada que se ejecuta si la solicitud se realiza correctamente

loadImage (objeto, devolución de llamada):

• objeto: Objeto configurado para la carga de activos
• callback: Una función de devolución de llamada que se ejecuta si la solicitud se realiza correctamente

loadScript (Object, callback): carga e inserta el contenido de un script en el DOM:

• objeto: Objeto configurado para la carga de activos
• callback: Una función de devolución de llamada que se ejecuta si la solicitud se realiza correctamente

loadSVG (Object, callback): carga e inserta el contenido de un SVG en el DOM:

• objeto: Objeto configurado para la carga de activos
• callback: Una función de devolución de llamada que se ejecuta si la solicitud se realiza correctamente

startLoad: inicia la carga de los archivos.

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

• obj: El objeto que se carga

Inyectores (allElements, callback): inyecta los elementos cargados en el DOM:

• allElements: Los elementos cargados
• callback: Una función de devolución de llamada que se ejecuta si el proceso se realiza correctamente.

putInOrder (objeto, devolución de llamada): ordena los elementos cargados:

• obj: El objeto que se carga
• callback: Una función de devolución de llamada que se ejecuta si el proceso se realiza correctamente.