I'm a beginner in developpement, and for my personal knowledge I try to make a website in html, css and js.

The website get a random project from Artstation with Axios at a Json and display it on the web page, I have 24 random image generated

I share you the Js code :

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;
}

Don't juge it I know is not verry clean, now I explain my problem, I made the code like that for generate the 24 images simultaneously, the problem is if I not open my console in google chrome he load the function one by one, this is a issue I don't have with firefox

I have made the result in video Did you know how fix that ?