Funktioniert Load auch mit Javascript?

[Gunnar Bittersmann]

@@Rolf B

(function() {
   let vogelbild = document.querySelector("#vogelbild div");
   let titel = document.querySelector("#vogelbild figcaption");
   let rotkehlchen = document.createElement("img");

   rotkehlchen.addEventListener("load", function handler(event) {
       titel.textContent = "Rotkehlchen";
       rotkehlchen.removeEventListener("load", handler);
   });

rotkehlchen.src = "bilder/voegel/rotkehlchen.jpg";
vogelbild.innerHTML = "";    // alten Inhalt löschen
vogelbild.appendChild(rotkehlchen, titel);
})();

So. Nun ist's sauber 😀.

Nein! Ein img-Element ohne alt-Attribut ist nicht ganz sauber. So ein Anfängerfehler sollte dir nicht passieren.

Da fehlt zumindest

rotkehlchen.alt = '';

Leerstring, denn ein Screenreader soll „Rotkehlchen“ (was schon die Bildunterschrift ist) ja nicht doppelt vorlesen.

Noch besser: die Bildunterschrift auch gleich als accessible label nehmen. Dazu braucht diese eine ID:

<figcaption id="vogelbildunterschrift">

Und dann:

rotkehlchen.setAttribute('aria-labeledby', 'vogelbildunterschrift');

🖖 Stay hard! Stay hungry! Stay alive! Stay home!