Una cosa bastante atractiva que están implementando muchas webs es la carga de datos utilizando el scroll. El mecanismo consiste en cargar una serie de datos en pantalla. Para ir viendo los datos utilizaremos el scroll. Y cuando el scroll alcance el final de la página, cargaremos nuevos datos, permitiéndonos hacer más scroll. Así, una y otra vez cada vez que lleguemos al final de la página.
Esto lo podemos ver en webs como Facebook y Twitter.
Para realizar nuestro ejemplo nos vamos a basar en el artículo Repaginar con jQuery y AJAX. Lo único que vamos a hacer es sustituir los botones de repaginación por el funcionamiento del scroll.
Lo que hay que tener claro en este ejemplo es conocer como es la estructura del contenido que vamos a solicitar al servidor. Para ello tenemos una capa principal que será la lista de mensajes y dentro de esta N capas dónde estarán los mensajes concretros.
El código HTML sería algo así:
Mediante jQuery lo que hacemos es ir cargando mensajes dentro de las capas cada vez que detectemos que la barra de scroll ha llegado al final.
Lo primero con jQuery será cargar el fichero de jQuery que nos ayudará en la realización del código
Una vez instanciado jQuery vamos a realizar la primera carga de datos. Esto lo haremos nada más terminar la carga de la página. Es decir, controlando el método .ready() de jQuery.
$(document).ready(function() {
cargardatos();
});
La carga de datos es una petición AJAX con jQuery. Veamos el código:
function cargardatos(){
$.get("/samples/php/datos.php?pagina="+pagina,
function(data){
if (data != "") {
$(".mensaje:last").after(data);
}
});
}
La variable página nos sirve para realizar una petición de una u otra página al servicio AJAX expuesto
La petición AJAX con jQuery la realizamos mediante la función .get(). Lo más importante es que la respuesta de la petición la dejamos detrás del último mensaje de la capa de mensajes mediante la función .after(). El selector que utilizamos es .mensaje:last
$(".mensaje:last").after(data);
Una vez que hemos visto la carga y que la hemos ejecutado al cargar la página. Tenemos que ver como realizar la misma petición cada vez que el scroll llega al final de la página. Para poder acometer esto lo que vamos a capturar es el evento .scroll().
Para el cálculo hay que conocer 3 variables:
- Alto del documento, es el tamaño del documento: document).height()
- Alto de la ventana, es el tamaño de la ventana: $(window).height()
- Posición del scroll, es la posición del documento en la que se encuentra el scroll: $(window).scrollTop()
De esta forma, cuando a la posición del scroll le sumemos el tamaño de la ventana y nos dé el tamaño del documento, será que habremos llegado al final del documento y por lo tanto hay que lanzar una nueva carga de datos.
$(window).scrollTop() == $(document).height() - $(window).height()
El código quedaría de la siguiente forma:
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
pagina++;
cargardatos()
}
});
Vía: Anieto2K
