Implementar la carga progresiva de contenido es fundamental para cualquier aplicación web que consuma datos de una API. Aquí se aborda paso a paso cómo pasar de una carga estática a una paginación dinámica con un botón de "cargar más", sentando las bases para un futuro infinite scrolling.
¿Cómo crear un botón de carga dinámica con JavaScript?
El punto de partida es una lista de películas en tendencia que ya se muestra en pantalla, pero que carga todas las imágenes de golpe porque aún no tiene lazy loading en esta vista. El objetivo es agregar un botón al final de la lista que, al hacer clic, traiga la siguiente página de resultados desde la API [01:20].
Para crear el botón se utiliza document.createElement('button'), asignándole un texto con innerText y luego insertándolo en el contenedor con appendChild [02:08]. Es un elemento temporal, pensado para ser reemplazado después por el comportamiento de scroll.
javascript
const buttonLoadMore = document.createElement('button');
buttonLoadMore.innerText = 'Cargar más';
genericSection.appendChild(buttonLoadMore);
Un detalle importante: al nombrar la variable como buttonLoadMore, hay que asegurarse de usar exactamente ese nombre en el appendChild. Un simple typo como escribir button en lugar de buttonLoadMore genera un error de "Button is not defined" [02:40].
¿Cómo consumir una API de forma paginada con Axios?
La API de The Movie DB soporta un query parameter llamado page que indica qué página de resultados queremos recibir [04:50]. Axios permite enviar estos parámetros como un objeto dentro de la propiedad params, lo que resulta más limpio que concatenar strings en la URL.
javascript
async function getPaginatedTrendingMovies() {
const { data } = await api('trending/movie/day', {
params: {
page,
},
});
}
El addEventListener conecta el evento 'click' del botón con la función getPaginatedTrendingMovies [03:25]. Cada vez que se ejecuta, se incrementa una variable page definida fuera de la función con let page = 1. Antes de cada llamada a la API, se suma uno con page++, de modo que la primera paginación pide la página dos, la siguiente la tres, y así sucesivamente [07:32].
¿Qué pasa con el parámetro clean en createMovies?
La función createMovies originalmente limpia el contenedor antes de insertar nuevas películas. Eso es útil para evitar duplicados al volver a la misma ruta sin recargar, pero en el caso de la paginación necesitamos que las películas anteriores permanezcan [05:15].
La solución es recibir un objeto como parámetro con propiedades nombradas: lazyLoad y clean. Esto evita enviar valores booleanos sueltos donde no queda claro a qué corresponde cada true o false [06:30].
javascript
function createMovies(movies, container, { lazyLoad = false, clean = true } = {}) {
if (clean) {
container.innerHTML = '';
}
// resto de la lógica
}
- Por defecto,
clean es true: siempre limpia el contenedor.
- Al paginar, se envía
clean: false para conservar los resultados previos.
lazyLoad controla si las imágenes usan carga diferida.
Este patrón de usar objetos como parámetros con valores por defecto es una práctica que viene de la programación orientada a objetos en JavaScript y permite llamadas mucho más legibles [06:55].
¿Cómo lograr carga infinita con el botón?
Dentro de getPaginatedTrendingMovies, después de insertar las nuevas películas, se vuelve a crear un botón idéntico con su propio addEventListener apuntando a la misma función [07:08]. No es recursividad tradicional porque la ejecución depende del evento de clic del usuario, pero el efecto es similar: cada clic genera un nuevo botón que permite cargar la siguiente página.
javascript
buttonLoadMore.addEventListener('click', getPaginatedTrendingMovies);
Al recargar la página y hacer clic repetidamente, se van acumulando películas hacia abajo sin perder las anteriores. Los botones anteriores quedan visibles porque no se eliminan, lo cual es un buen ejercicio: hacer que desaparezca el botón previo cada vez que se crea uno nuevo [08:50].
El siguiente paso natural es reemplazar ese evento de clic por un evento de scroll que detecte cuándo el usuario llega al final de la página, disparando automáticamente la carga de la siguiente página de películas. ¿Ya tienes ideas sobre cómo implementar esa detección de scroll? Comparte tu enfoque en los comentarios.
