jQuery carga más datos al desplazarse
Me pregunto cómo puedo implementar más datos en el desplazamiento solo si div.loading está visible.
Normalmente buscamos la altura de la página y la altura de desplazamiento para ver si necesitamos cargar más datos. pero el siguiente ejemplo es un poco complicado.
La siguiente imagen es un ejemplo perfecto. Hay dos .loading div en el cuadro desplegable. Cuando el usuario se desplaza por el contenido, lo que esté visible debería comenzar a cargar más datos.
Entonces, ¿cómo puedo saber si .loading div es visible para el usuario todavía o no? Entonces puedo comenzar a cargar datos solo para ese div.
En jQuery, verifique si ha llegado al final de la página usando la función de desplazamiento. Una vez que llegue a eso, haga una llamada ajax (puede mostrar una imagen de carga aquí hasta la respuesta de ajax) y obtenga el siguiente conjunto de datos, agréguelo al div. Esta función se ejecuta al desplazarse hacia abajo en la página nuevamente.
$(window).scroll(function() {
if($(window).scrollTop() == $(document).height() - $(window).height()) {
// ajax call get data from server and append to the div
}
});
¿Has oído hablar del complemento jQuery Waypoint ?
A continuación se muestra la forma sencilla de llamar a un complemento de waypoints y hacer que la página cargue más contenido una vez que llegue al final del desplazamiento:
$(document).ready(function() {
var $loading = $("<div class='loading'><p>Loading more items…</p></div>"),
$footer = $('footer'),
opts = {
offset: '100%'
};
$footer.waypoint(function(event, direction) {
$footer.waypoint('remove');
$('body').append($loading);
$.get($('.more a').attr('href'), function(data) {
var $data = $(data);
$('#container').append($data.find('.article'));
$loading.detach();
$('.more').replaceWith($data.find('.more'));
$footer.waypoint(opts);
});
}, opts);
});
