Thumbnail im HTML durch anklicken wieder vergrössern !?
bearbeitet von Gunnar Bittersmann@@Gunnar Bittersmann
> Ein Gimmick ist das Thumbnail als Hintergrundbild. Kostet ja nix, das wurde ja bereits übertragen. Und für die kurze Zeit, in der das Bild für die große Darstellung geladen wird, ist ein unscharfes Bild besser als gar kein Bild.
Funktioniert so nicht. Genauer gesagt: Funktioniert nur beim ersten Öffnen der Lightbox.
Ab dem zweiten Mal steht ja schon der URL des zuvor angezeigten Bildes im `src`-Attribut[^1] und das falsche Bild wird blitzt kurz auf, bevor das anzuzeigende Bild geladen ist. Man müsste also `src` erst nullen.
[^1]: Genauer gesagt: in der `src`-Eigenschaft des Elementobjekts
Aber wenn man da sowieso ran muss, kann man auch gleich das Vorschaubild dort eintragen anstatt dieses als Hintergrundbild zu setzen. In meinem Codepen sieht’s jetzt so aus:
```js
// show enlarged preview image while big image is being loaded
lightboxImage.src = lightboxThumbnail.src;
requestAnimationFrame(() => {
lightboxImage.src = lightboxThumbnail.dataset.src ?? lightboxLink.href;
});
```
🖖 Живіть довго і процвітайте
{:@uk}
--
*„Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“*
— @Grantscheam auf Twitter