jquery - tipos - ¿Hay un complemento de desplazamiento infinito con un botón de cargar más?

regimen verbal

Question

Hola, ¿alguien sabe dónde puedo obtener el complemento de desplazamiento infinito que tiene un botón en el que hace clic antes de cargarlo en más publicaciones?

esto es lo que estoy buscando (mira el botón más en la esquina inferior derecha)

Answer 1

Básicamente, tu cuerpo debería tener el desbordamiento CSS : desplazarte y el botón más debería agregar más HTML a tu contenedor Div usando jquery append - http://api.jquery.com/append/

Answer 2

Desde la página de documentación del plugin jQuery infinite scroll:

En 1.4 puede activar la carga de la siguiente página de contenido a voluntad. Primero desvinculará el comportamiento predeterminado. Y luego activa la próxima extracción cada vez que quieras.

// unbind normal behavior. needs to occur after normal infinite scroll setup.
$(window).unbind(''.infscr'');
// call this whenever you want to retrieve the next page of content
// likely this would go in a click handler of some sort
$(document).trigger(''retrieve.infscr'');

debería resolver tu problema.

Answer 3

Si está buscando un desplazamiento infinito, eso es una cosa, pero solo un botón Más no debería requerir un complemento.

HTML

<div id="items">
    <!-- Run your query using the page parameter to offset items, then display the items here -->
</div>
<button id="more">More</button>

JS

var page = 0;
$(''#more'').click(function(){
    page++;
    $(''<div/>'').appendTo(''#items'').load(''the/same/url/?page=''+page+'' #items'');
});

La función .load realizará una llamada AJAX a la URL proporcionada y el selector opcional simplemente extraerá ese elemento coincidente en particular. En este caso, si el parámetro? Page de la página de visualización controla el desplazamiento a la consulta para extraer los elementos que desea, la carga de la URL anexará el siguiente conjunto de elementos cada vez que se llame.

Por supuesto, podría crear una página AJAX única que simplemente devuelva los fragmentos de HTML para el siguiente conjunto de elementos, pero se involucrará un poco más dependiendo de su arquitectura. Sin embargo, ahorrará ancho de banda / tiempo de ejecución.

Answer 4

Con la versión actual de Infinite Scroll Plugin (2.1.0), puede pausar cuando los elementos están cargados, y luego reanudar y verificar si el nuevo contenido debe cargarse al hacer clic en un botón (o cualquier otra cosa):

$(''.container'').infinitescroll({
        // infinite scroll options
    },
    function(){
        // pause when new elements are loaded
        $(''.container'').infinitescroll(''pause'')
    }
);

function resume_infinite_scroll(){
    // resume
    $(''.container'').infinitescroll(''resume'')
    // check if new elements should be loaded
    $(''.container'').infinitescroll(''scroll'')
}

y entonces

<button onclick="resume_infinite_scroll()">load more</button>