Inicio > Desarrollo web > Cargar contenido con el scroll usando jQuery

Cargar contenido con el scroll usando jQuery

Básicamente lo que quiero es que se me carguen un número de artículos en la web y cuando haga scroll hacia abajo se carguen unos cuantos más… Típico que te hace Twitter o Facebook.

Para ello sigo los siguientes pasos:

1. Incluyo jQuery en el head:

http://code.jquery.com/jquery-1.10.1.min.js

2. Añado el siguiente código HTML en el body para indicar dónde se va a cargar el contenido dinámico con jQuery:

</div>

<p>Haga scroll para cargar más datos…</p>

3. Añado el siguiente código con jQuery:

var pagina=1;
$(document).ready(function(){
cargardatos();
});

function cargardatos(){
$(“#loader”).html(““);
$.get(“/datos.php?pagina=”+pagina”,
function(data){
if (data != “”) {
$(“.mensaje:last”).after(data);
}
$(‘#loader’).empty();
}
);
}

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

4. Por último creamos el fichero datos.php que debe ser un fichero que reciba por GET el parámetro pagina (1 en adelante) y genere una serie de div de la clase “mensaje” con contenido de la forma:

….

Fuentes:

https://code.google.com/p/lineadecodigo/source/browse/trunk/lineadecodigo_jquery/cargar-datos-scroll/

Categorías:Desarrollo web Etiquetas: , ,
  1. Aún no hay comentarios.
  1. No trackbacks yet.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s