feat: preload images with css hack

This commit is contained in:
afn 2023-03-26 19:13:28 -04:00
parent c03344b04c
commit 8da38befe1

View File

@ -83,17 +83,30 @@
logos[j] = k; logos[j] = k;
} }
function preloadImage(url: string) { let content = ''
let img = new Image();
img.src = url;
}
logos.forEach((variants) => { logos.forEach((variants) => {
variants.forEach((variant) => variants.forEach((variant) =>
preloadImage(variant.optimized_direct_url ?? variant.logo_direct_url) content += `url(${variant.optimized_direct_url ?? variant.logo_direct_url}) `
); );
}); });
// can't use inline styles with ::after so here's this hack for a hack
let style = `
.wrapper::after {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
z-index: -1;
content: ${content};
}
`
let styleSheet = document.createElement("style")
styleSheet.innerText = style
document.head.appendChild(styleSheet)
// min is the lowest index of the logos on a page, max is the highest index // min is the lowest index of the logos on a page, max is the highest index
// max will be determined based on min and the amount of logos we want on each page (4) // max will be determined based on min and the amount of logos we want on each page (4)
min = currentPage * logoAmount; min = currentPage * logoAmount;