diff --git a/web/wall.html b/web/wall.html index d0212ab..053077a 100644 --- a/web/wall.html +++ b/web/wall.html @@ -1291,6 +1291,7 @@ cardEl.addEventListener('touchend', e => { // Every item's page is the same address with its handle in it, so the map used // to spend 1,2 MB repeating that prefix 12.552 times — and meta.handle another // 0,4 MB repeating the key it was already filed under. Both are derived here. +const mediumUrl = h => `https://hel1.your-objectstorage.com/brasiliana/derivados/medio/${h.replace(/\//g, '_')}.webp`; const sourceUrl = h => `https://brasilianafotografica.bn.gov.br/brasiliana/handle/${h}?show=full`; function showCard(data) { @@ -1322,6 +1323,15 @@ function showCard(data) { ctx.drawImage(page.source, entry.col * S, entry.row * S, S, S, 0, 0, out, out); img.src = c.toDataURL('image/jpeg', 0.92); } + // the atlas tile is only 128 px: show it at once, then swap in the medium image + // (~1000 px) once it has loaded — unless the card has moved on to another piece + const want = data.handle; + img.dataset.handle = want; + if (want) { + const big = new Image(); + big.onload = () => { if (img.dataset.handle === want) img.src = big.src; }; + big.src = mediumUrl(want); + } document.getElementById('card-wrap').classList.add('open'); }