JavaScript asynchron nachladen

Für das Element <script> gibt es in HTML5 die Attribute async und defer, mit welchen erreicht werden kann, dass das Laden der betreffenden Script-Dateien den Aufbau der Seite nicht blockiert:

https://wiki.selfhtml.org/wiki/Referenz:HTML/Attribute/async

https://wiki.selfhtml.org/wiki/Referenz:HTML/Attribute/defer

Entweder sollte async verwendet werden oder defer. Wenn das Script erst nach dem Parsen der Webseite ausgeführt werden soll, dann defer. Allerdings sind dann noch nicht alle Bilder geladen. Hierzu müsste wohl das Script selbst angepasst werden, z.B. indem die Ausführung an den load event gekoppelt wird.

Vorsicht ist geboten, wenn Bilder von externen Servern geladen werden: wenn diese mal überlastet sind, kann das auch dazu führen, dass das Script nicht oder nur mit großer Verzögerung ausgeführt wird

Was versteht man unter PARSEN ?

Das Analysieren des HTML-Codes durch den Browser, so dass dieser darauf CSS- und JavaScript-Code anwenden kann.

Ferner hast du geschrieben, dass da noch nicht alle Bilder sind. Welche Bilder?

Alle, also auch diejenigen, die über CSS (z.B. als Hintergrundbilder) geladen werden

Diese beiden Skripte binde ich am Ende von BODY ein.

Damit erreichst du zumindest schon mal, dass das Laden anderer Dateien (z.B. Grafikdateien), die weiter oben im HTML-Code eingebunden sind, nicht durch die Scripte blockiert wird. Wenn auch das Laden indirekt (z.B. über CSS) eingebundener Dateien nicht blockieren soll, dann solltest du noch ein async oder defer Attribut einbauen.

Ich möchte dass diese beiden Skripte erst geladen werden, wenn alle anderen Elemente der Seite geladen sind.

Wenn du damit meinst, dass sie "fertig" geladen sein sollen, also auch alle größeren Bilder komplett übertragen wurden, dann musst du die Scripte so anpassen, dass sie erst nach dem load event starten. Mit einem einfachen HTML-Attribut erreichst du das nicht. Dazu musst du den JavaScript-Code in den Scripten anpassen.

Aber wie gesagt: falls du mit dem Script Rechskonformität bez. DSGVO erreichen möchtest, würde ich das Laden des Scriptes nicht davon abhängig machen, dass alle Bilder komplett geladen sind. Wenn ein Bild aus irgendeinem Grund nicht geladen werden kann, wird auch der Cookie-Hinweis nicht angezeigt.

Ich würde von daher empfehlen, mich auf den Einsatz des HTML-Attributs async oder defer zu beschränken. Das ist nicht nur einfacher umzusetzen, das Laden des Cookie-Hinweis wird dann auch nicht durch ein möglicherweise nicht ladendes Bild blockiert.

habe es nun zuerst mit dem Attribut async probiert, aber dann hat ein Skript nicht mehr funktioniert. Mit dem Attribut defer hat es dann funktioniert.
Externe Bilder werden durch diese Skripte übrigens nicht geladen.