const images = document.querySelectorAll("[data-image-id]");
images.forEach((image, i) => {

    if (i < 4) {
        image.setAttribute("loading", "eager")
    }

    const spinner = document.querySelector(`[data-spinner-id="${image.getAttribute("data-image-id")}"]`)

    if (image.height > 0 && image.complete) {
        image.classList.remove("invisible");
        spinner.classList.add("invisible");
        return
    } else {
        image.classList.add("invisible");
        spinner.classList.remove("invisible");
    }

    image.addEventListener("load", () => {
        console.log("image " + image.getAttribute("data-image-id") + " loaded");
        image.classList.remove("invisible");
        spinner.classList.add("invisible");
        image.removeEventListener("load", this);
    });

});