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

[Linuchs]

Kurzform: Javascript verändert die URL von Grafiken, Browser sucht erstmal nach den nicht vorhandenen Roh-URLs. Die vergebliche Suche möchte ich verhindern.

Langform:

Moin,

in vielen Liedtexten zeige ich die Griffe für Ukulele-Akkorde. Jedes Lied hat zunächst eine Stamm-Tonart, z.B. C Dur.

Nun kann ich der Url einen Parameter für eine andere Tonart anhängen,z.B. G

/024 shanty_mann/index.htm?tonart=G

Deshalb sind im HTML-Code nicht die absoluten Akkorde notiert, sondern die relativen Halbtonschritte (Tonika=(0), Dominante=(5), Subdominante=(-5) usw.).

<img src="ukulele_griff_(0).png" alt="(0)">

Bei C-Dur macht Javascript nach dem Laden der Seite daraus

<img src="img/ukulele_griff_C.png" alt="C">

und bei G-Dur entsprechend

<img src="img/ukulele_griff_G.png" alt="G">

Weil Javascript erst nach vollständigem Laden der Seite aktiv wird, versucht der Browser die nicht vorhandenen img wie

<img src="ukulele_griff_(0).png" alt="(0)">

zu laden. Das führt zwar nicht zu Fehlern, hält aber auf und ist unsauber programmiert.

Ich dachte, ich könnte das Laden mit

display: none;

verhindern, um die Grafiken per JS freizuschalten, aber der „Trick“ funktioniert nicht, Firefox will die fehlenden Roh-Grafiken trotzdem laden.

Gruß, Linuchs

[Camping_RIDER]

Aloha ;)

Du schreibst, dass die Information zur Tonart durch JavaScript eingespeist wird - das heißt entweder, dass die Tonart zum Zeitpunkt des Seitenaufrufs noch nicht klar ist oder, dass du imho von vornherein auf die falsche Technologie dafür gesetzt hast.

Ich bleibe mal beim entweder, für den oder-Fall kann man dir vermutlich nicht weiterhelfen.

Im entweder-Fall müsste die Auswahl der Tonart ja durch ein select o.ä. geschehen? Da dieses ja dann auch über eine defaultmäßig ausgewählte Option verfügt müsstest du ja eigentlich in der Lage sein, diese default-Tonart von Anfang an als img-Source zu verwenden und auf die Platzhalter zu verzichten.

Alternativ könntest du auch custom-Elemente (x-) einsetzen, die als Information die Platzhalter-Urls tragen und die imgs dann erst nach Tonart-Auswahl mit Javascript aus den custom-Platzhaltern generieren und diese ersetzen.

Dritte Option: verwende als src überall die selbe 1px-Grafik (die der Browser dann cached) und gib die Information über die URL als data-Attribut mit...

Grüße,

RIDER

[Linuchs]

Moin RIDER,

dass die Tonart zum Zeitpunkt des Seitenaufrufs noch nicht klar ist

Doch, aber da JS erst nach dem Laden der Seite aktiviert wird, wird erst dann der URL-Parameter ?tonart=F ausgewertet.

Auswahl der Tonart ja durch ein select o.ä. geschehen?

Nein, JS liest den Parameter

let setAkk_params = new URLSearchParams(document.location.search);
if ( setAkk_params.get("tonart") ) {
  setAkk_Tonika = setAkk_params.get("tonart"); // z.B. "G", "Am"
}

Mit diesem Verfahren kann ich ganze Liederbücher drucken ohne von Hand die einzelnen Tonarten (per select) wählen zu müssen.

custom-Elemente (x-) einsetzen

??? Kannst du dafür ein Code-Beispiel posten?

Gruß, Linuchs

[Camping_RIDER]

Aloha ;)

dass die Tonart zum Zeitpunkt des Seitenaufrufs noch nicht klar ist

Doch, aber da JS erst nach dem Laden der Seite aktiviert wird, wird erst dann der URL-Parameter ?tonart=F ausgewertet.

Dann verwendest du mit Javascript die falsche Technologie - setze stattdessen serverseitige Skripte, z.B. PHP, ein, um direkt passende IMG-URLs zu bekommen und das Problem ist erledigt.

custom-Elemente (x-) einsetzen

??? Kannst du dafür ein Code-Beispiel posten?

<x-img src="ukulele_griff_(0).png">

JavaScript sucht dann nach allen x-img-Elementen, liest ihr src-Attribut und ersetzt sie durch neue img-Elemente mit angepasstem src-Attribut.

Grüße,

RIDER

[Linuchs]

Kann JS einen Tag ändern?

Dann könnte ich einen ungültigen nehmen, den der Browser ignoriert

<bild src="ukulele_griff_(0).png" alt="(0)">

und zum Schluss aus <bild <img machen?

... es wird immer kryptischer ...

[Auge]

Hallo

Kann JS einen Tag ändern?

Ja, natürlich.

Dann könnte ich einen ungültigen nehmen, den der Browser ignoriert

<bild src="ukulele_griff_(0).png" alt="(0)">

Folge bitte, wenn du diesen Ansatz wählst, Janoschs Rat, ein valides, eigenes Element zu benutzen. Stelle deinem bild bitte x- voran, wie es die Spezifikation für solche Anwendungsfälle vorsieht. Das ist alles.

und zum Schluss aus <bild <img machen?

Dafür ist replaceWith dein Freund. Beachte: replaceWith ersetzt das gesamte Element und nicht nur den Tag-Namen. Du musst als die Attribute aus x-bild auslesen und passend in img einfügen.

Tschö, Auge

[Ryuno-Ki]

Moin Auge,

Dann könnte ich einen ungültigen nehmen, den der Browser ignoriert

<bild src="ukulele_griff_(0).png" alt="(0)">

Folge bitte, wenn du diesen Ansatz wählst, Janoschs Rat, ein valides, eigenes Element zu benutzen. Stelle deinem bild bitte x- voran, wie es die Spezifikation für solche Anwendungsfälle vorsieht. Das ist alles.

Die Spezifikation sieht vor, dass selbst-definierte Elemente:

• mit einem Kleinbuchstaben beginnen und
• Einen Bindestrich enthalten

Das x-Präfix geht auf X-Tag von Mozilla zurück. Bei den Entwickelnden hat sich aber Polymer durchgesetzt, bis es von Lit abgelöst wurde.

Dafür ist replaceWith dein Freund. Beachte: replaceWith ersetzt das gesamte Element und nicht nur den Tag-Namen. Du musst als die Attribute aus x-bild auslesen und passend in img einfügen.

Alternativ kannst du auch das <img />-Element als Kind in dein Custom-Element einfügen. HTML Web Components sind eher geeignet Progressive Enhancement zu erreichen, d.h. der bessere Stil.

Gruß,

[Der Martin]

Guten Morgen,

Kann JS einen Tag ändern?

aah, das wäre schön! Aus Montag einfach einen Freitag machen! 😁

Einen schönen Tag noch
 Martin

[Gunnar Bittersmann]

@@Linuchs

Kann JS einen Tag ändern?

Nö. (AFAIK)

JS kann ein Element aus dem DOM entfernen und ein anderes dafür einsetzen. Beides teurere Operationen als ein Element im DOM zu belassen und einfach nur einen Attributwert zu ändern.

Und von der Performanz abgesehen:

... es wird immer kryptischer ...

Ja, das würde deinen Code deutlich komplizierter machen. Bleibe beim Ändern des Attributwerts.

🖖 Live long and prosper

[Ryuno-Ki]

Moin Gunnar,

@@Linuchs

Kann JS einen Tag ändern?

Nö. (ASAIK)

JS kann ein Element aus dem DOM entfernen und ein anderes dafür einsetzen. Beides teurere Operationen als ein Element im DOM zu belassen und einfach nur einen Attributwert zu ändern.

Wäre das Argument gekommen, dass es schöner aussähe, wenn ein Element ersetzt werden würde, hätte ich es angenommen. Performance sollte regelmäßig keine Rolle spielen, weil zu wenig geändert wird. Die heutigen Browser sind schon kleine Betriebssysteme. Um Performance würde ich mir erst Gedanken machen, wenn die Anwendung zu ruckeln beginnt.

Und von der Performanz abgesehen:

... es wird immer kryptischer ...

Ja, das würde deinen Code deutlich komplizierter machen. Bleibe beim Ändern des Attributwerts.

Lesbarkeit. Gut. Akzeptiere ich als Argument 😇

Gruß,

[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

[Rolf B]

Update des Beitrags! Tyrannosuchus Regex ausgerottet!

Rolf

[Gunnar Bittersmann]

@@Rolf B

Lass das src Attribut ganz weg.

Und beim Validator schrillen die Alarmglocken. Die kann man ignorieren …

Oder das src-Attribut befüllen. @Camping_RIDER erwähnte eine 1px-Grafik – so’n Spacer-GIF hat man doch sicher noch in der Mottenkiste.

Den HTTP-Request kann man aber vermeiden, indem man eine Inline-Grafik verwendet, bspw. <img src="data:image/svg+xml,%3Csvg%3E%3C/svg%3E" alt=""/>^[1]

🖖 Live long and prosper

---

1. %3C und %3E sind die Escapes für < bzw. >. ↩︎

[Rolf B]

Hallo Gunnar,

ja, hatte ich auch schon überlegt. Dafür hätte ich aber dieses data-SVG raussuchen müssen 😉

Solange ein HTML mit Validatorfehlern nicht dazu führt, dass die Seite vom Browser komplett abgelehnt wird, und ich weiß, dass die Seite vor der ersten Layout-Phase korrekt sein wird, sind mir Validatorfehler ziemlich egal.

Ich kann aber auch das Argument unterstützen, dass man diesen Job besser PHP-seitig erledigt. Einen Tonartwechsel muss man nicht mit JS machen, das geht auch per Postback.

Rolf

[Gunnar Bittersmann]

@@Linuchs

Kurzform: Javascript verändert die URL von Grafiken, Browser sucht erstmal nach den nicht vorhandenen Roh-URLs. Die vergebliche Suche möchte ich verhindern.

Wozu das Ganze? Beim Transponieren klemmt man den Kapodaster in einen anderen Bund – fertig. Kein Bedarf an anderen Akkordgrafiken. 🤪

Deshalb sind im HTML-Code nicht die absoluten Akkorde notiert, sondern die relativen Halbtonschritte (Tonika=(0), Dominante=(5), Subdominante=(-5) usw.).

Da kochst du mal wieder ein eigenes Süppchen‽ Ich hätte die üblichen Bezeichnungen verwendet: Tonika = I, Dominante = V, Subdominante = IV usw.

🖖 Live long and prosper

[Ryuno-Ki]

Moin Linuchs,

Kurzform: Javascript verändert die URL von Grafiken, Browser sucht erstmal nach den nicht vorhandenen Roh-URLs. Die vergebliche Suche möchte ich verhindern.

Vielleicht hab ich da noch Alternativen zu. https://michaeleskin.com/abctools/abctools.html hat eine Option Uke unter der Textarea, welches eine Erweiterung für Ukulele einblendet.

Du scheinst eher ein Chord Chart zu suchen?

Langform:

Moin,

in vielen Liedtexten zeige ich die Griffe für Ukulele-Akkorde. Jedes Lied hat zunächst eine Stamm-Tonart, z.B. C Dur.

Wie werden die gepflegt? Gibt Plugins für ABC-Notation in CMS.

Weil Javascript erst nach vollständigem Laden der Seite aktiv wird, versucht der Browser die nicht vorhandenen img wie

<img src="ukulele_griff_(0).png" alt="(0)">

zu laden. Das führt zwar nicht zu Fehlern, hält aber auf und ist unsauber programmiert.

Ich dachte, ich könnte das Laden mit

display: none;

verhindern, um die Grafiken per JS freizuschalten, aber der „Trick“ funktioniert nicht, Firefox will die fehlenden Roh-Grafiken trotzdem laden.

Ich sehe da gerne ein data-src-Attribut in Kombination mit einem leeren src. Konkret bei Lazy-Loading, bevor wir loading="lazy"-Unterstützung im Browser hatten.

Vielleicht lohnt es sich aber auch, die Elemente erst komplett in JavaScript zu generieren? Klingt so, als ob du da nicht viel Einfluss auf der Serverseite hast?

[Gunnar Bittersmann]

@@Ryuno-Ki

Vielleicht lohnt es sich aber auch, die Elemente erst komplett in JavaScript zu generieren? Klingt so, als ob du da nicht viel Einfluss auf der Serverseite hast?

Webspace ohne PHP, gibt es sowas noch?

Für mich klingt das eher nach „Wenn das einzige Werkzeug, das du hast, ein Hammer ist, sieht jedes Problem wie ein Nagel aus.“

Allerdings gibt es auch etwas, was für die clientseitige Lösung spricht: Wenn man die Seite vor oder während der Anreise zur Probe geladen hat und sich dann bei der Probe herausstellt, dass man das Lied doch lieber höher oder tiefer singt, kann man auch im Proberaum noch transponieren, der sich im Keller ohne Kontakt zur Außenwelt befindet. (Die Bilder für die Griffe hat man dann freilich nicht, außer denen, die schon im Cache sind.)

🖖 Live long and prosper

[Ryuno-Ki]

Moin Gunnar,

Vielleicht lohnt es sich aber auch, die Elemente erst komplett in JavaScript zu generieren? Klingt so, als ob du da nicht viel Einfluss auf der Serverseite hast?

Webspace ohne PHP, gibt es sowas noch?

Statische Webseiten lassen sich für umme überall hosten :)

Für mich klingt das eher nach „Wenn das einzige Werkzeug, das du hast, ein Hammer ist, sieht jedes Problem wie ein Nagel aus.“

Kennst du Atwood's Law?

Any application that can be written in JavaScript, will eventually be written in JavaScript.

🤡

Allerdings gibt es auch etwas, was für die clientseitige Lösung spricht: Wenn man die Seite vor oder während der Anreise zur Probe geladen hat und sich dann bei der Probe herausstellt, dass man das Lied doch lieber höher oder tiefer singt, kann man auch im Proberaum noch transponieren, der sich im Keller ohne Kontakt zur Außenwelt befindet. (Die Bilder für die Griffe hat man dann freilich nicht, außer denen, die schon im Cache sind.)

Hab ich keine eigenen Erfahrungen mit.

Gruß,