Soy un principiante en desarrollo, y por mi conocimiento personal trato de hacer un sitio web en html, css y js.

El sitio web obtiene un proyecto aleatorio de Artstation con Axios en un Json y lo muestra en la página web, tengo 24 imágenes aleatorias generadas

Te comparto el código Js:

 const images = document.getElementsByClassName("pic"); const redirect1 = document.getElementsByClassName("redirect1"); const redirect2 = document.getElementsByClassName("redirect2"); randomButton.addEventListener("click", function () { for (i = 0; i < images.length; i++) { images[i].src = "small_square.png"; loadImages(i); } }); async function loadImages(i) { const response = await axios.get("https://www.artstation.com/random_project.json"); images[i].src = response.data.cover.smaller_square_image_url; redirect1[i].href = response.data.permalink; redirect2[i].href = response.data.permalink; }

No lo jueguen se que no es muy limpio, ahora les explico mi problema, hice el codigo asi para generar las 24 imagenes simultaneamente, el problema es que si no abro mi consola en google chrome carga la funcion una por una , este es un problema que no tengo con firefox

He hecho el resultado en video ¿Sabías cómo arreglar eso?