El preloader que necesitas para tu aplicación web

03-06-2016
 

Un ‘preloader’ es un pequeño script cuya misión es entretener al usuario(O por lo menos que no se ponga nervioso) mientras se cargan todos los elementos de una aplicación web o SPA(Single Page Application). No es un tema baladí, un buen ‘preloader’ mejora mucho la experiencia de usuario.

Preloader Blog

Preloader Blog

Este preloader, además de mostrar una imagen mientras se cargan los elementos muestra una barra de progreso en la parte superior, consiguiendo informar al usuario del progreso de carga.

Aquí tenéis el código fuente comentado:

<html>
	<body>
		
		<style>
			body {
				margin: 0px;
				}

			#pr {
				position: absolute;
				left: 50%;
				top: 50%;
				margin-top: -200px;
				margin-left: -148px;
				}

			#loadingbar {
				height: 4px;
				float: left;
				width: 0px;
				overflow: hidden;
				background-color: #ffd740;
				}

		</style>

		<div id='loadingbar'></div>

		<img id='pr' src='css/images/loading.gif' onload="javascript: LoadElem();"/>

		<script>
			var loads=0;

			/* Aquí enumeramos todos los elementos a cargar */
			var elems=[
				{ el: "css/images/acoronadoc.png" },
				{ el: "css/images/icn_menu.png" }
				/* ... */
				];

			LoadElem();

			function LoadElem() {
				if ( loads>=elems.length ) {
					window.location='index2.html';
					} else {
					document.getElementById("loadingbar").style="width: "+((100/elems.length)*(loads+1))+"%;";
					preloadImg( elems[loads].el );
					}
				}

			function preloadImg( src ) {
				var imageObj = new XMLHttpRequest();
        			imageObj.open('GET', src);
        			imageObj.send('');

				imageObj.onerror = loadedElement;
				imageObj.onload =loadedElement;
				}

			function loadedElement() {
				loads++;

				LoadElem();
				}

		</script>

	</body>
</html>

Si queréis ver este preloader funcionando lo podéis hacer en la aplicación de este blog para Android: https://play.google.com/store/apps/details?id=com.lostsys.albertapp

 

Leave a Reply

© Albert Coronado Calzada