feed twitter facebook LinkedIn facebook

jQuery » Cargar contenido con el scroll usando jQuery

mayo 24, 2010 por Víctor Cuervo 5 Comentarios Imprimir Imprimir

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

  1. <div id="mensajes">
  2. <div class="mensaje"></div>
  3. </div>

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

  1. <script type="text/javascript" src="jquery.js"></script>

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.

  1. $(document).ready(function() {
  2. cargardatos();
  3. });
  4.  

La carga de datos es una petición AJAX con jQuery. Veamos el código:

  1. function cargardatos(){
  2. $.get("/samples/php/datos.php?pagina="+pagina,
  3. function(data){
  4. if (data != "") {
  5. $(".mensaje:last").after(data);
  6. }
  7. });
  8. }

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

  1. $(".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:

  1. $(window).scroll(function(){
  2. if ($(window).scrollTop() == $(document).height() - $(window).height()){
  3. pagina++;
  4. cargardatos()
  5. }
  6. });

Vía: Anieto2K

Visualizar el Codigo
Visualiza el artículo
Descargar el Codigo
Descargar el código
Error en el Codigo
Error en el código
Foro sobre jQuery
Foro sobre jQuery
tags: , , , , , , ,

Artículos relacionados:

5 comentarios »

RSS feed para los comentarios de esta entrada. TrackBack URI

  1. Ariel
    julio 26, 2013 #

    Muy util.

    En mi caso no era necesaria la variable “pagina”, asi que quedo asi.

    $(window).scroll(function(){
    if ($(window).scrollTop() == $(document).height() – $(window).height()){
    cargardatos()
    }
    });

    Gracias.

  2. Gabriel
    diciembre 12, 2013 #

    Muchas gracias!, me sirvio!!

  3. adrian
    marzo 25, 2014 #

    excelete, me sirvio de maravilla, mil gracias, ahora, mi pregunta es, como borro los datos y los cargo de nuevo, sucede que agrego registros nuevos, pero quiero que aparezcan arriba, no abajo, un ejemplo muestra
    img Ayer
    img antier
    img antier
    y por ahi agregamos la imagen de hoy
    como borro y vuelvo a cargar todo de nuevo, le busque y le busque y no logro hacerlo, alguien me puede ayudar se los agradeceria

  4. alberto
    septiembre 23, 2014 #

    hola , te queria preguntar si por favor me podrias decir desde donde tomo los mensajes que quiero mostrar, yo hice una muestra en localhost y puse $.get(“datos.php?pagina=”+pagina, como enlace ,, sera que esta mal? EN DATOS.PHP es donde puse lo que quiero cargar pero no me funciono,, se que en algo me estoy equivocando seguramente. gracias

  5. bryan
    noviembre 18, 2014 #

    amigo podrias subir el codigo fuente de nuevo, porfavor. he estado intentando y no me muestra me sal error.
    ayudeme porfavorr

Deja un comentario

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*