low-quality image placeholder

lqip.js

/* low-quality image placeholder */
/* author: Vit Pavlik, August 2025 */
/* succesfully deployed on https://vitapavlik.cz/fekt_mapa */
const levels = [
    "static/img-lowest/",
    "static/img-lower/",
    "static/img-moderate/"
]

function img_upgrade_quality(event) {
    const element = event.target
    const old_src = element.getAttribute("src")

    for (let i = 0; i < levels.length - 1; i++) {
        if (old_src.startsWith(levels[i])) {
            const new_src = old_src.replace(levels[i], levels[i + 1])
            element.setAttribute("src", new_src)
            /* console.log(`${old_src} -> ${new_src}`) */
            break
        }
    }
}


document.addEventListener("DOMContentLoaded", () => {
    document.querySelectorAll("img").forEach(img => {
        if (img.complete) {
            img_upgrade_quality({"target": img})
        } else {
            img.addEventListener("load", img_upgrade_quality)
        }
    });
})