Zur Navigation

JavaScript asynchron nachladen

1 krieger98

Ich habe auf meiner Seite http://www.fahrrad-workshop-sprockhoevel.de/Tipps.htm
einen Bannerwechsel eingefügt. Die JavaScript-Dateien haben eine Größe von 90 Kb und 20Kb. Das Laden dieser Dateien dauert zu lang. Ich möchte deshalb die Dateien asynchron nachladen.
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.cycle.min.js" type="text/javascript"></script>
Wie gehe ich da vor oder welche Möglichkeiten gibt es da noch?

13.06.2016 20:32

... 3 Jahre später ...

3 Franz (Gast)


Hallo Jörg,
auf meiner Webseite möchte ich aufgrund der DSGVO ein Skript einbauen, das darauf hinweist, dass Cookies eingesetzt werden.
Dieses Skript sollte aber erst geladen werden, wenn alle anderen Dateien der Webseite (CSS, Bilder, usw.) geladen sind.
Wäre das folgende zielführend?
<script src="js/cookies-info.js" async defer></script>
oder was empfehlen Sie?

06.07.2019 10:36

4 Jörg Kruse

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

06.07.2019 11:48 | geändert: 06.07.2019 11:54

5 Franz (Gast)

Hallo Jörg, vielen Dank für deine Antwort! Ganz verstanden habe ich diese aber nicht. Was versteht man unter PARSEN ?
Ferner hast du geschrieben, dass da noch nicht alle Bilder sind. Welche Bilder?
Bin kein Experte, deshalb bitte noch einmal um Antwort.

Beispielsweise habe ich zwei Skripte, die unabhängig voneinander sind und die für die Funktion der Internetseite nicht unbedingt erforderlich sind.
Diese beiden Skripte binde ich am Ende von BODY ein.
Ich möchte dass diese beiden Skripte erst geladen werden, wenn alle anderen Elemente der Seite geladen sind. Wie kann ich das erreichen?

07.07.2019 16:09

6 Jörg Kruse

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.

08.07.2019 10:31 | geändert: 08.07.2019 10:40

7 Franz (Gast)

lieber Jörg,
vielen Dank für deine äußerst ausführliche Antwort! Hat mir sehr geholfen.
Wünsche dir eine schöne Woche!

08.07.2019 14:47

8 Franz (Gast)

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.

08.07.2019 16:31

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]