Scroll infinito con jQuery IAS

Publicado en Nov 2, 2015

Hoy veremos como hacer una paginación con scroll infinito con jQuery IAS.

Lo primero que debemos hacer es tener una paginación clásica con links y la lógica en el backend para que eso funcione.

Después usaremos el plugin jQuery IAS para hacer la paginación con scroll infinito. Lo descargamos y lo incluimos en el head de nuestro html.

Ejemplo:

<script type="text/javascript">
  $(document).ready(function() {
    var ias=jQuery.ias({
      container : '#timeline', // Contenedor principal donde se añadirán los elementos
      item: '.publicaciones', // elemento simple
      pagination: '.paginationControl', // control de paginación
      next: '.paginationControl .siguiente', // selector de siguiente página
      loader: '<div class="pub"><img src="/public/img/ajax-loader.gif"/></div>', // imagen de carga
      triggerPageThreshold: 5 // Cargar automáticamente 5 veces antes de mostrar el botón de ver más
    });

    // Link para cargar la siguiente página
    ias.extension(new IASTriggerExtension({
        text: 'Ver más', 
        offset:3
    }));

    // Añadir imagen de carga
    ias.extension(new IASSpinnerExtension({
        src: '/public/img/ajax-loader.gif', 
    }));

    // Añadir texto cuando no se encuentran más resultados
    ias.extension(new IASNoneLeftExtension({
        text: 'No hay más resultados',
    }));
  });
</script>