UI(User Interface): Cargando contenido dinámicamente con el scroll

Para no obligar al usuario a paginar, páginas como facebook o linkedin cargan el contenido(Posts, actualizaciones, productos) dinámicamente a medida que el usuario se va desplazando con el scroll. En este pantallazo se ve como mi aplicación para Android carga automáticamente los posts de mi blog usando esta técnica:

Cargar contenido con el scroll

Para conseguir esto usando HTML y JQuery, primero, utilizaremos un DIV que en el momento en que se muestre por la pantalla se disparará una llamada Ajax para cargar mas contenido. En mi caso este elemento estará marcado con una clase llamada ‘ajaxLoader’ (Luego ya vosotros por CSS le dais formato):

	<div class='ajaxLoader'>&nbsp;</div>

Luego con este script implementamos la funcionalidad:

var isloading=0; # Semaforo para que no tener varias peticiones a la vez
var page=0; # Página actual

# Inicializamos los eventos
$( function() {
	$( window ).scroll(function() { checkcontent(); });

 	$( window ).resize(function() { checkcontent(); }); 

	checkcontent();
 	});

# Función que checkea si hay que cargar contenido
function checkcontent() {
	if ( isloading==1 ) return;

	var el=$(".ajaxLoader");

	if ( $(window).scrollTop()+$(window).height() > el.offset().top )
		loadcontent( el );
	}

# Función que carga contenido
function loadcontent( el ) {
	isloading=1;

	var jqxhr = $.get( "/network/posts.php", { page: page }, function(data) {
		$( data ).insertBefore( el );

		page++;
		isloading=0;

		checkcontent();
		});
	}

Eso es todo, espero que os sea de utilidad…