El 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
Miguel
14 años ago
En mi caso cuento con un theme que hace exactamente lo mismo pero con la diferencia que para ver mas artículos se debe presionar un botón.
Aunque la verdad me parece muy interesante este código jQuery. Así que a ver si me animo y lo pruebo en alguno de mis blogs 😀
Gracias por la info Pablo.
Pablo
14 años ago
@Miguel: Claro, esa carga que decis vos es interesante porque es asincronica, y te permite ver el footer del blog, lo unico que cambia con esto es que evitas que el visitante tenga que hacer alguna acción, es cuestion de probar a ver como resulta 😀
Saludos!!
carolina Lorca
14 años ago
hola, estoy tratando de implementar este plugin en un theme que estoy diseñando desde 0 para mi sitio… pero estoy algo perdida … técnicamente voy 50 y 50 .. por que aun aunque el plugin se activa … luego continua cargando mis entradas duplicándolas… no se si estoy colocando bien los divs … alguien podría guiarme en el paso a paso … gracias !!
Uli
14 años ago
Es justo lo que tengo en mi página web. Claro, a medida que le sigo agregando un artículo nuevo, me parece que se hace cada vez más extensa. Una solución que se me ocurre, sería el poder añadirle en la parte superior e inferior una flecha flotante que indique «arriba» y otra «abajo.» Lo he visto en algunos sitios, pero hasta el momento no he encontrado la manera de poder hacerlo. Sin embargo, le puse un plugin que cuando te deslizas por la página, aparece en el centro de la misma y dice «Scroll to Top,» pero no me termina de gustar. ¿Alguna idea…?
Pablo, muchísimas gracias por compartir tus conocimientos en este universo virtual. ¡Saludos!
Jesús Rizo
13 años ago
Hola Disculpa podrias decir cual utilizaste para el scroll infinito con boton saludos