En este proyecto, he creado un scroll infinito de imágenes utilizando la API de Unsplash. La idea principal era cargar y mostrar imágenes de Unsplash a medida que el usuario se desplaza hacia abajo en la página. Comencé definiendo varias variables para realizar el seguimiento del estado del proyecto, como photoReady, imagesLoaded, totalImages, photosArray e isInitialLoad. Estas variables me ayudaron a controlar el flujo de carga y mostrar las imágenes de manera adecuada.
Luego, configuré la URL de la API de Unsplash utilizando mi clave de API y el número inicial de imágenes que quería cargar. Esta URL se basó en la obtención de imágenes aleatorias. Además, implementé una función llamada updateAPIURLWithNewCount que me permitió actualizar la URL de la API con un nuevo recuento de imágenes cuando era necesario cargar más imágenes.
Después, creé una función llamada imageLoaded que se ejecutaba cada vez que se cargaba una imagen. En esta función, incrementaba el contador imagesLoaded y verificaba si todas las imágenes habían sido cargadas. Si todas las imágenes estaban cargadas, establecía la variable photoReady en verdadero y ocultaba el elemento de carga.
Utilicé una función auxiliar llamada setAttributes para establecer atributos en los elementos DOM. Esta función me ayudó a asignar atributos como href, src, alt y title a los elementos <a> e <img> que creaba para mostrar las imágenes de Unsplash.
Luego, implementé la función displayPhotos que se encargaba de mostrar las imágenes en el DOM. Esta función iteraba sobre el array photosArray y creaba elementos <a> y <img> para cada foto. Utilicé la función setAttributes para establecer los atributos correspondientes en cada elemento. También agregué un evento de carga a cada imagen para llamar a la función imageLoaded. Finalmente, agregué los elementos al contenedor de imágenes (imageContainer).
Para obtener las fotos de la API de Unsplash, creé la función getPhotos. En esta función, realicé una solicitud utilizando fetch y luego convertí la respuesta en formato JSON. Luego, llamé a la función displayPhotos para mostrar las imágenes obtenidas. Además, realicé algunas acciones adicionales si era la carga inicial, como actualizar el recuento de imágenes en la URL de la API y establecer la variable isInitialLoad en falso.
Finalmente, configuré un evento de desplazamiento de la ventana para detectar cuando el usuario se acercaba al final de la página. Si se cumplían las condiciones necesarias, como estar cerca del final de la página y tener las imágenes listas para cargarse, llamé a la función getPhotos para cargar más imágenes.
En resumen, he creado una función que carga imágenes de Unsplash y las muestra a medida que el usuario se desplaza hacia abajo en la página. Esto genera un efecto de scroll infinito donde las imágenes se cargan dinámicamente a medida que se necesitan.