You are here
Barra de progreso para su sitio con JavaScrip Sin categoría 

Barra de progreso para su sitio con JavaScrip

Barra de progreso para su sitio con JavaScrip

Desde el advenimiento de la telefonía móvil, los sitios web se están convirtiendo cada vez más en “aplicaciones”. Conceptos que tienen sentido para una aplicación que se ejecuta localmente se transfieren a la web. Una de ellas es la reciente incorporación de “barras de progreso” a algunos de los sitios web de Google que muestran el estado de carga de la página.

En este consejo rápido, vamos a utilizar el nuevo plugin NProgress jQuery para añadir una barra de progreso a una página web. Si desea obtener más información, sigue leyendo!

El NProgress Plugin

NProgress es un plugin de jQuery que muestra una barra de progreso interactiva en la parte superior de la página, inspirado en el que en YouTube. Se compone de un objeto global – NProgressque posee una serie de métodos que se pueden llamar para hacer avanzar la barra de progreso. He aquí una rápida demostración de los métodos:

JS

$(function(){

// Quick Load

$(‘button.quick-load’).click(function(){
NProgress.done(true);
});

// Incremental Load

$(‘button.show-progress-bar’).click(function(){
NProgress.start();
});

$(‘button.load-one-item’).click(function(){
NProgress.inc();
});

$(‘button.finish’).click(function(){
NProgress.done();
});

// Percentage Load

$(‘button.set-to-25’).click(function(){
NProgress.set(0.25);
});

$(‘button.set-to-75’).click(function(){
NProgress.set(0.75);
});

});

HTML
<div>
<h1>Quick Load</h1>
<p>Show the progress bar quickly. This is useful for one-off tasks like AJAX requests and page loads.</p>
<button class=”quick-load”>Quick Load</button>
</div><div>
<h1>Incremental Load</h1>
<p>The progress bar is incremented with every element that is loaded. This can be useful in web apps that load multiple items.</p>
<button class=”show-progress-bar”>Show Progress Bar</button>
<button class=”load-one-item”>Load An Item</button>
<button class=”finish”>Finish Loading</button>
</div><div>
<h1>Percentage Load</h1>
<p>NProgress lets you set the progress bar to a specific percentage. This can be useful in apps where you know the total number of the items to be loaded, so you can calculate the percentage. This is the technique that we will use in the demo.</p>
<button class=”show-progress-bar”>Show Progress Bar</button>
<button class=”set-to-25″>Set to 25% Loaded</button>
<button class=”set-to-75″>Set to 75% Loaded</button>
<button class=”finish”>Finish Loading</button>
</div>

CSS
*{
margin:0;
padding:0;
}body{
font:14px/1.3 ‘PT Sans’, sans-serif;
color: #5e5b64;
padding:40px 40px 0;
}h1{
font-size:18px;
padding-bottom:4px;
}

button{

background-color: #78bad6;
box-shadow: 0 0 5px #8fcde7 inset, 0 1px 1px #eee;

display: inline-block;
padding: 9px 15px;
margin: 20px auto 20px;

font-weight: bold;
font-size: 12px;
text-align: center;
color: #fff;

border-radius: 2px;
box-shadow: 0 1px 1px #e0e0e0;
border: 0;

opacity:1;
cursor: pointer;
}

button:hover{
opacity: 0.9;
}

La página del plugin github  sugiere que puede enchufarse la NProgress.start()función para su$(document).ready()devolución de llamada y NProgress.done()de $(window).load()que es una manera muy fácil de integrar el plugin.

Esto no va a mostrar el progreso real (para eso se tendrá que supervisar todos los recursos que se incluyen en su página y la barra de incrementar de forma manual), sin embargo la mayoría de la gente no se dará cuenta de todos modos.

Ahora que tiene una buena idea de cómo se utiliza NProgress, vamos a hacer un ejemplo más complicado – una galería que muestra una barra de progreso durante la carga de imágenes.

La barra se corresponderá con el número real de imágenes cargadas.

La galeria

Como de costumbre, comenzamos con el formato HTML. Esta vez es muy simple, sólo tenemos que necesite un div para sostener las fotos, y un botón de carga:

index.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8"/>
		<title>Quick Tip: Add a Progress Bar to Your Site</title>

		<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:700" rel="stylesheet" />

		<!-- The Stylesheets -->
		<link href="assets/nprogress/nprogress.css" rel="stylesheet" />
		<link href="assets/css/style.css" rel="stylesheet" />

	</head>

	<body>

		<h1>Gallery Progress Bar</h1>

		<div id="main"></div>

		<a href="#" id="loadMore">Load More</a>

		<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
		<script src="assets/nprogress/nprogress.js"></script>
		<script src="assets/js/script.js"></script>

	</body>
</html>

Estoy incluyendo una fuente personalizada de Google TypeDNA Font Manager y dos hojas de estilo en el<head>, y tres archivos JavaScript antes del cierre </body>de la etiqueta.

Las cosas se ponen más interesantes en la parte del tutorial de jQuery.

Aquí estoy usando el objeto Diferidapara mostrar las fotos de forma consecutiva.

Esto es necesario, porque queremos que las fotos para descargar en paralelo (que es mucho más rápido), pero se desvanecen a la vista, una tras otra.

Este artículo es demasiado corto para explicar cómo funcionan Deferreds, pero se puede leer a través de uno de estos:  enlace , enlace , enlace . Son una herramienta poderosa que puede simplificar las interacciones asincrónicas.

activos / js / script.js

(function($){

	// An array with photos to show on the page. Instead of hard 
	// coding it, you can fetch this array from your server with AJAX.

	var photos = [
		'assets/photos/1.jpg',	'assets/photos/2.jpg',
		'assets/photos/3.jpg',	'assets/photos/4.jpg',
		// more photos here
	];

	$(document).ready(function(){		

		// Define some variables

		var page = 0,
			loaded = 0,
			perpage = 10,
			main = $('#main'),
			expected = perpage,
			loadMore = $('#loadMore');

		// Listen for the image-loaded custom event

		main.on('image-loaded', function(){

			// When such an event occurs, advance the progress bar

			loaded++;

			// NProgress.set takes a number between 0 and 1
			NProgress.set(loaded/expected);

			if(page*perpage >= photos.length){

				// If there are no more photos to show,
				// remove the load button from the page

				loadMore.remove();
			}
		});

		// When the load button is clicked, show 10 more images 
		// (controlled by the perpage variable)

		loadMore.click(function(e){

			e.preventDefault();

			loaded = 0;
			expected = 0;

			// We will pass a resolved deferred to the first image,
			// so that it is shown immediately.
			var deferred = $.Deferred().resolve();

			// Get a slice of the photos array, and show the photos. Depending
			// on the size of the array, there may be less than perpage photos shown

			$.each(photos.slice(page*perpage, page*perpage + perpage), function(){

				// Pass the deferred returned by each invocation of showImage to 
				// the next. This will make the images load one after the other:

				deferred = main.showImage(this, deferred);

				expected++;
			});

			// Start the progress bar animation
			NProgress.start();

			page++;
		});

		loadMore.click();
	});

	// Create a new jQuery plugin, which displays the image in the current element after
	// it has been loaded. The plugin takes two arguments:
	//	* src - the URL of an image
	//	* deferred - a jQuery deferred object, created by the previous call to showImage
	// 
	// Returns a new deferred object that is resolved when the image is loaded.

	$.fn.showImage = function(src, deferred){

		var elem = $(this);

		// The deferred that this function will return

		var result = $.Deferred();

		// Create the photo div, which will host the image

		var holder = $('<div class="photo" />').appendTo(elem);

		// Load the image in memory

		var img = $('<img>');

		img.load(function(){

			// The photo has been loaded! Use the .always() method of the deferred
			// to get notified when the previous image has been loaded. When this happens,
			// show the current one.

			deferred.always(function(){

				// Trigger a custom event on the #main div:
				elem.trigger('image-loaded');

				// Append the image to the page and reveal it with an animation

				img.hide().appendTo(holder).delay(100).fadeIn('fast', function(){

					// Resolve the returned deferred. This will notifiy
					// the next photo on the page and call its .always() callback

					result.resolve()
				});
			});

		});

		img.attr('src', src);

		// Return the deferred (it has not been resolved at this point)
		return result;
	} 

})(jQuery);

La barra de progreso se incrementa con cada imagen cargada por la función de devolución de llamada que detecta el imagen-cargado de eventos personalizado.

De esta manera el ShowImage  función es libre de manejar solamente la carga y visualización de las fotos.


Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Related posts