PxLoader es una librería en Javascript que permite cargar imágenes, archivos de sonido o lo que necesites en HTML5. Se usa para entretener a los visitantes mientras se está cargando un juego u otros efectos. Así el visitante no abandonará la web mientras se carga todo el contenido por detrás, sabrá que se está cargando el contenido.
Además permite priorizar el orden de los elementos para ser bajados.
¿Cómo configuro PxLoader?
1.- Descargar los archivos
Primero te tienes que descargar los archivos necesarios en la página web oficial del plugin.
2.- Insertar código en el head
<script type="text/javascript" src="js/PxLoader.js"></script>
<!- images --> <script type="text/javascript" src="js/PxLoaderImage.js"></script> <!- sounds --> <script type="text/javascript" src="js/PxLoaderSound.js"></script>
3.- Carga el efecto
Dependiendo del ejemplo que quieras usar el código será distinto. Por ejemplo, en el caso de que quieras insertar los típicos números que van avanzando del 0 al 100, mientras se cargan los elementos por detrás, el código a insertar sería:
// delay each image and append the timestamp to prevent caching
var baseUrl = 'http://thinkpixellab.com/pxloader' +
'/slowImage.php?delay=1&time=' + new Date,
$log = $('#sample2-log').val(''),
$progress = $('#sample2-progress').text('0 / 100'),
loader = new PxLoader();
// add 100 images to the queue
for(var i=0; i < 100; i++) {
// this time we'll create a PxLoaderImage instance instead of just
// giving the loader the image url
var pxImage = new PxLoaderImage(baseUrl + '&i=' + i);
// we can add our own properties for later use
pxImage.imageNumber = i + 1;
loader.add(pxImage);
}
// callback that runs every time an image loads
loader.addProgressListener(function(e) {
// log which image completed
$log.val($log.val() + 'Image ' + e.resource.imageNumber + ' Loadedr');
// scroll to the bottom of the log
$log.scrollTop($log[0].scrollHeight);
// the event provides stats on the number of completed items
$progress.text(e.completedCount + ' / ' + e.totalCount);
});
loader.start();
En la página web del autor te puedes descargar los archivos necesarios y ver varios ejemplos de su funcionamiento, aquí te estoy mostrando el más sencillo pero tienes muchos más.
Cada vez más es posible realizar más cosas con HTML5 e ir abandonando poco a poco el flash, sobre todo en temas web y de juegos. Tarde o temprano se abandonará el flash completamente.
Link | PxLoader, preloader en javascript para HTML5
