PxLoader es una biblioteca JavaScript para ayudarnos en el desarrollo de aplicaciones HTML5, específicamente en el proceso de descarga de archivos, permitiendo controlar la descarga de documentos, ya sean imágenes, sonidos, etc.
Esta pequeña biblioteca fue pensada principalmente para el desarrollo de juegos y sitios web que utilizan HTML5. Con apenas unas lineas de código podemos controlar la visualización de los documentos, evitando posibles problemas relacionados a los tiempos de descarga. Por ejemplo, podemos configurar que se muestre un menú compuesto por 10 imágenes, en el momento exacto que se descarga la ultima imagen.
El proyecto esta compuesto por tres archivos:
- PxLoader.js La biblioteca principal.
- PxLoaderImage.js Permite la manipulación de archivos del tipo imagen.
- PxLoaderSound.js Sirve para la gestión de archivos de sonidos.
Actualmente el proyecto se encuentra abierto a nuevos agregados, en la sección de plugins pueden encontrar una completa documentación sobre el uso del API, especialmente dirigida a aquellas personas que quieran contribuir con el proyecto.
En el sitio oficial podemos encontrar una serie de ejemplos. Uno que me gusto y que explica básicamente el funcionamiento de este plugin es el siguiente:
var loader = new PxLoader(),
backgroundImg = loader.addImage('images/headerbg.jpg'),
treesImg = loader.addImage('images/trees.png'),
ufoImg = loader.addImage('images/ufo.png');
// llamada al finalizar la descarga
loader.addCompletionListener(function() {
var canvas = document.getElementById('sample1-canvas'),
ctx = canvas.getContext('2d');
ctx.drawImage(backgroundImg, 0, 0);
ctx.drawImage(treesImg, 0, 104);
ctx.drawImage(ufoImg, 360, 50);
});
// comienza la descarga
loader.start();
El ejemplo descarga un set de 3 imágenes, las mismas componen una escena que utiliza canvas de HTML5. El plugin descarga las imágenes y una vez finalizada la carga ejecuta canvas. Muy simple pero útil en trabajos que tienen muchas imágenes, y que la carga secuencial afectaría la visualización final.
Un detalle interesante es que PxLoader permite mostrar un indicador de carga, podemos utilizar el clásico porcentaje, o bien una barra de descarga.
Web: PxLoader
