Kann das Laden von bestimmten img zunächst verhindert werden?

[Rolf B]

Hallo Linuchs,

meine 0,02 € wären dies:

Lass das src Attribut ganz weg. Mit der CSS-Regel

img:not([src]) {
   display:none;
}

verschwinden die Griffbilder dann automatisch aus der Anzeige.

Statt src="ukulele_griff_(0).png" würde ich

<img data-griff="0" alt="">

Ja, alt="", weil das Bild im uninitialisierten Zustand keine alternative Darstellung besitzt. Und ich würde mal annehmen, dass das Template für den Dateinamen immer das Gleiche ist, deswegen habe ich nicht ukulele_griff_(0).png hingeschriebem

Sicherlich gibt's außer Griff (0) auch noch andere, und du sorgst beim Transponieren dafür, dass in Tonart C aus 0 ein C wird, aus 1 ein D etc, und in Tonart G wird aus 0 ein G, aus 1 ein A, und so weiter.

Du hast also sicherlich eine Tabelle, die pro Tonart die Griffnummern in Akkorde übersetzt. So was wie

const akkorde = { 
  "C": [ "C", "D", "E", ... ],
  "G": [ "G", "A", "H", ... ],
};

oder wie auch immer das konkret bei Dir aussieht.

Beim Setzen der Akkorde holst Du Dir einfach Tonart und machst Du dann pro Bild dies (ich nehme an, da muss dann irgendwie passend der Griff (0) in den richtigen Akkord übersetzt werden) – bei 12 verschiedenen Akkorden gibt's dann entweder 12 replace-Aufrufe...

const akkordNr = parseInt(bild.dataset.griff),
      akkordName = akkorde[tonart][akkordNr];

bild.src = "ukulele_griff_" + akkordName + ".png";
bild.alt = AkkordName;

Rolf