Verständnisfrage zum Laden von jQuery
 

Hallo,

für Joomla gibt es ein nettes Plugin, um Diashows & Co. zu gestalten, namens DJ-ImageSlider. Dieser Slider verwendet jQuery. Aus Performancegründen wird ja immer wieder empfohlen, die Javascripte am Ende der Seite aufzurufen. Habe ich gemacht.

ABER: Das o.g. Plugin funktioniert nur wenn jQuery im Head aufgerufen wird. Was kann man da machen?
Ich dachte, dass durch das "späte" Laden von Javascript nur einfach der normale Seitenaufbau beschleunigt werden soll. Müsste ein Script, das auf jQuery setzt dann nicht trotzdem funktionieren, auch wenn jQuery am Ende des HTML-Dokuments eingebunden wird?


Cheers,
Mops

Hier noch weitere Hinweise zur Grundfunktion von Javascript:
Auf Variablen kann erst zugegriffen werden, nachdem sie referenziert wurden. Greift man auf nicht deklarierte Variablen zu, dann fliegt ein Fehler.
jQuery verwendet die Variable $, schreibt man nun ein jQuery Plugin so greift diese auf $(".meinElement").addClass() zu, was natürlich erst existiert, nachdem jQuery geladen wurde.

Man muss das Javascript für das Plugin erst aufrufen, nachdem jQuery geladen wurde, dann ist $ auch für jQuery definiert. Vielleicht ist das Plugin so schlampig geschrieben, dass es zwingend inline Javascript verwendet?
Dann müsstest du das inline JS auslagern und in ein separates JS-File geben.

Edit: ad "Ich dachte, dass durch das "späte" Laden von Javascript nur einfach der normale Seitenaufbau beschleunigt werden soll"
Ja, er wird deshalb beschleunigt, weil: Trifft ein Browser auf eine .js Datei dann lädt er die erstmal runter. Ist er damit fertig, schaut er, was danach kommt. Das, was in der JS Datei steht, wird auch gleichzeitig ausgeführt und interpretiert. Fügst du die Dateien erst am Ende ein, dann wird das parsen der .js-Datei erst gemacht, nachdem das gesamte HTML da ist. Dem User fällt es dann nicht mehr auf, dass der Browser im Hintergrund noch weiter rechnet.

Edit 2:
Auch hier wieder der Hinweis auf die Konsole der Browser Entwicklertools, dort solltest du das sofort sehen. Verwendest du diese eigentlich?

Okay, danke für den Tipp. Tatsächlich wurde ein Inlineskript im Head eingefügt. Wenn ich das in meine eigene JS-Datei einfüge, die ich erst nach dem jQuery aufrufen lasse, funktioniert alles.

Und ja, ich schau in die Konsole. Meistens... ;)


Cheers,
Mops

Es ist für Leute, die dir helfen wollen, sehr hilfreich zu wissen, was deine Konsole alles ausspuckt. Deshalb das bitte immer in deinen Beiträgen dazuschreiben ;)

Die Empfehlung ist leicht veraltet. Da mittlerweile alle gängigen Browser das defer-Attribut unterstützen, ist es sinnvoller die Javascript-Dateien mit ebendiesem im head zu laden. Der Seitenaufbau wird dadurch nicht mehr blockiert, die Javascripte werden noch während des parsens geladen (also früher, als wenn du die Skripte am Ende des body einbindest) und in der richtigen Reihenfolge ausgeführt und das erst wenn das DOM fertig ist. Ein weiterer Vorteil ist, dass die Skripte parallel geladen werden.

Das Attribut kann allerdings nur bei externen Skripten verwendet werden (was aber der Standard sein sollte).

Hier gibt es eine Grafik die das Ladeverhalten veranschaulicht. (Der Beitrag selbst ist alt.)

Es ist mir vollkommen unklar was du mit dem Link sagen willst. Der Inhalt ist in einem Punkt sogar falsch, die Skripte werden parallel geladen, lediglich die Ausführung ist sequentiell. Falls das nicht gewünscht ist, gibt es das async-Attribut. Beides ist meiner Meinung nach sinnvoller als die Skripte ans Ende vom body zu hängen.

Verzeih für den vorhin kommentarlosen Einwurf des Links, der soll lediglich der Zusatzinformation dienen. Du darfst gerne an google schreiben, dass sie hier einen Fehler in ihrer Dokumentation haben, alles habe ich im Detail nicht durchgelesen.
Mir ging es eher darum, dass es auch Risiken bergen kann wenn man nicht aufpasst, bzw. Skripte nicht wirklich ordentlich geschrieben sind. Was bei plugins ja leider manchmal der Fall ist. Das nur als Info, falls man sich für defer entscheidet und etwas plötzlich nicht funktioniert, damit man weiß, wieso das passieren kann.

Ok, zu Problemen dürfte es wohl in der Regel nur beim Einsatz von document.write kommen und das wird wohl hoffentlich nicht eingesetzt.