Bueno hoy veremos como implementar esta cool feature para poder incorporarlas en nuestros desarrollos.
Para los que no estén muy familiarizados el infinite scroll page es un comportamiento que nos permite mostrar bloques de datos nuevos dentro de nuestra vista actual (pagina) conforme el usuario se acerca al final de la misma, eliminando la necesidad de un paginador.
Herramientas a usar:
- jQuery. Para simplificar el JS coding.
- JSON files. Chunks (bloques) de datos para ir incorporando.
- HTML. Pagina de ejemplo.
- jDebounce. jQuery plugin para diferir la ejecución de métodos.
Empecemos con el layout de nuestra página:
<!DOCTYPE html>
<html>
<head>
<title>Infinite Scroll Sample</title>
</head>
<body>
<h1>Teachers</h1>
<ul id="data"></ul>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script src="/debounce/jdebounce.js"></script>
</body>
</html>
Como podemos ver ya agregué las referencias a jQuery y
jDebounce. Ahora agregaremos un poco de código para realizar la carga de datos inicial.
<script type="text/javascript">
jQuery(function($) {
function printData(response) {
var rootElement = $("#data");
for (var i = 0; i < response.length; i++) {
rootElement.append("<li>" + response[i].name + "</li>");
}
}
function loadChuck(index) {
var chunkURL = "data/chunk.json";
$.get(chunkURL, null, printData, 'json');
}
loadChuck();
});
</script>
Ya con la carga inicial de datos toca definir unos estilos para presentar mejor la información:
<style>
ul {
list-style: none;
margin: 0px;
padding: 0px;
}
li {
border-bottom: 1px solid #ccc;
padding: 15px;
}
</style>
Puedes modificar a gusto la presentación mientras se logre que el contenido se extienda mas allá de nuestro
viewport.
Ya con la página lista agregamos el código para cargar más datos cuando se esté alcanzando el final del documento. Para ello debemos 'escuchar' el evento 'scroll' en el objeto document:
var document$ = $(document);
document$.on("scroll", function(ev) {
// Haz lago
});
Ahora bien para poder determinar si estamos por alcanzar el final de los datos debemos entender 1 concepto fundamental:
viewport.
El
viewport no es más que la sección visible de nuestro
documento HTML, que no es más que la ventana de nuestro navegador. Cuando ajustas el tamaño de la ventana a un tamaño menor el área visible es menor y viceversa.
Si el tamaño de un
documento HTML se extiende más allá del tamaño de nuestro
viewport aparecen los scrolls (verticales/horizontales) que nos permiten navegar la totalidad del
documento, mostrando una sección del mismo a la vez.
A nosotros nos interesan las longitudes verticales tanto del
viewport como del
document.
Para conocer el tamaño de nuestro
viewport usamos:
$(window).height();
Para conocer el tamaño de nuestro
documento usamos:
$(document).height();
También vamos a necesitar saber el número de pixeles recorridos en un scroll de nuestro documento, para ello usamos:
$(document).scrollTop();
Integrando todo nos queda algo parecido a esto:
var document$ = $(document);
var window$ = $(window);
document$.on("scroll", function(ev) {
var offset = window$.height() + document$.scrollTop();
// si estamos a 250px de alcanzar el final del documento
if (offset + 250 >= document$.height()) {
loadChuck(); // cargamos más datos
}
});
Ya con todo esto debemos tener algo funcional pero falta optimizarlo un poco y aquí es donde entra en juego el
jdebounce.
Debido a que el evento
scroll en ciertos escenarios se dispara varias veces (mouse arrastrando la barra vertical) terminaríamos con el mismo número de ajax requests que quizá para este ejemplo no impacte mucho pero en un ambiente de aplicación podría ser algo muy costoso en términos de recursos por lo que retrasamos la ejecución del handler a través de un
debouncing.
Con esto nos aseguramos que sólo un request sea disparado a la vez.
Modificamos el último bloque de código para tener algo parecido a esto:
var document$ = $(document);
var window$ = $(window);
document$.on("scroll", $.debounce(function(ev) {
var offset = window$.height() + document$.scrollTop();
// si estamos a 250px de alcanzar el final del documento
if (offset + 250 >= document$.height()) {
loadChuck(); // cargamos más datos
}
}, 500));
Y listo, espero haya sido de su agrado.
Pueden descargar el ejemplo completo en este link
Ahora pueden checar el código en
github
Comentarios