Scroll infinito AJAX con jQuery

Infinite AJAX Scroll es un plugin jQuery que sirve para recargar contenido sin la necesidad de refrescar la pagina completa, algo exactamente igual a lo que hacen sitios como Facebook o Twitter que utilizan la posición de la barra de scroll para cargar contenido bajo demanda. Un tema del que ya hablamos hace unos cuantos meses cuando escribí un post sobre el posible fin de la paginación convencional.

Para el que no conoce esta técnica de scroll infinito, la misma funciona de una forma muy sencilla y que consiste en cargar el contenido al detectar que el usuario llego al final del documento mediante la barra de scroll. De esta forma podemos cargar nuevo contenido mediante una llamada AJAX, cargando el nuevo a continuación del que ya se encontraba listado. Una practica muy interesante y practica de cara al usuario.

Si bien parece un poco complicado, implementar una solución de este tipo es muy sencillo si utilizamos algunos de los plugins disponibles, en esta oportunidad estamos hablando de Infinite AJAX Scroll que cuenta con algunas mejoras interesantes.

Una de las grandes ventajas de este plugin, y que alternativas similares no tiene, es que modifica la dirección de la barra del navegador a medida que vamos cargando nuevo contenido, mostrando de forma sencilla la posición exacta del nuevo contenido cargado recientemente mediante AJAX.

Ejemplo de uso

jQuery.ias({
  container 	: ".listing",
  item		: ".post",
  pagination	: "#content .navigation",
  next		: ".next-posts a",
  loader	: "images/loader.gif"
});

Un pequeño consejo, si van a implementar este tipo de soluciones les recomiendo leer el apartado de Google Analytics referido al seguimiento de eventos AJAX, ya que es posible monitorear y contabilizar este tipo de eventos, que en lugar de recargar el sitio completo carga solamente una porción de contenido. De esta forma no van a perder el control sobre las paginas vistas de su sitio web.

Web: Infinite AJAX Scroll