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:
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
