portrait.js (873B)
1 // Draws the about portrait one text row at a time once it has decoded, so 2 // it never paints in pixel rows as the jpeg streams in. 3 export function initPortrait() { 4 const img = document.querySelector("#about .fetch-logo"); 5 if (!img || img.dataset.boundRows === "1") return; 6 img.dataset.boundRows = "1"; 7 8 const play = () => { 9 img.classList.remove("rows-pending"); 10 img.classList.remove("rows-in"); 11 void img.offsetWidth; // restart the animation on a re-swap 12 img.classList.add("rows-in"); 13 }; 14 15 if (img.complete && img.naturalWidth > 0) { 16 play(); 17 return; 18 } 19 img.classList.add("rows-pending"); 20 const done = () => (img.decode ? img.decode().catch(() => {}) : Promise.resolve()).then(play); 21 img.addEventListener("load", done, { once: true }); 22 img.addEventListener("error", () => img.classList.remove("rows-pending"), { once: true }); 23 }