Scroll infinito con jQuery + Plugin WordPress

scroll infinitoEl scroll infinito se trata esencialmente de la carga de contenidos bajo demanda, actuando en relación a la posición de la barra de scroll del navegador. Esta precarga actualmente la podemos ver en varios sitios importantes, por ejemplo Facebook o Twitter.

Utilizar la metodología del scroll infinito puede ser interesante en casos como:

  • El contenido es demasiado largo para mostrar inicialmente, por ejemplo en un post con muchos comentarios.
  • Si el contenido se encuentra paginado. Por ejemplo en los resultados de una búsqueda, listas de productos, etc.
  • Por cuestiones de usabilidad, si quieres evitar que el usuario deba clickear reiteradas veces en el botón “siguiente”

Implementar un scroll infinito no es completamente fácil, no obstante existe el plugin jQuery infinite Scroll, que nos va a ayudar muchísimo en esta tarea.

$('#content').infinitescroll({

    navSelector  : "div.navigation",
                   // selector for the paged navigation (it will be hidden)
    nextSelector : "div.navigation a:first",
                   // selector for the NEXT link (to page 2)
    itemSelector : "#content div.post"
                   // selector for all items you'll retrieve
  });

Y una excelente noticia para los usuarios de WordPress, en el sitio oficial tenemos disponible en descarga directa un plugin para hacerlo funcionar con nuestro theme 😀

Lamentablemente no todo es color rosa, utilizar el scroll infinito tiene ciertas desventajas como se detallan en la web del plugin:

  • El footer del sitio nunca será alcanzado, al menos no hasta que el contenido a cargar se agote.
  • Actualmente no hay forma de cancelar el comportamiento de carga infinita.
  • No hay enlace permanente disponibles para el estado de la pagina.
  • Agregar contenido dinámico agrega uso de memoria a la pagina visualizada, y esto puede repercutir en el rendimiento del navegador.
  • Analytics no ofrece seguimiento para la carga dinámica, no al menos de forma predeterminada, aunque se puede configurar para que lo haga, pero esto requiere un trabajo adicional.

El plugin es muy bueno, pero les recomiendo analizar muy bien si su implementación merece la pena para su sitio web.

Web: infinite Scroll

Categorizado en: