jQuery in Footer einbinden

Druckbare Version

21.05.2017, 18:40
Jens

jQuery in Footer einbinden

Hallo,

bei Contao 4.3 ist mir aufgefallen, dass - anscheinend - jQuery im Header geladen wird.

Hat es ein besonderen Grund, warum es nicht mehr am Ende jeder Seite (nach dem Footer) geladen wird (wie bei der LTS Version von Contao)?
Falls nein, besteht die Möglichkeit die Möglichkeit das laden von jQuery nach dem Footer stattfinden zu lassen - die Performance beim laden der Seite dürfte damit (imho) besser sein.

Der einzige Weg der mir einfallen würde wäre das editieren von fa_page.html5. Dort hätte ich 2 Optionen - einmal "<?= $this->head ?>" verschieben, was den Nachteil hätte, dass bei den Template Layout-Einstellungen "Zusätzliche <head>-Tags" nicht mehr verwendet werden könnte oder verwende einfach ein eigenes Javascript-Template (js_xxx.html5) zum laden von jQuery, wobei dann die weiteren jQuery Module ebenfalls als Javascript-Template eingebunden werden müssten anstatt jQuery-Templates (an sich kein Problem - nur halt irgendwie unschön).

Gruß,
Jens
21.05.2017, 20:48
tab

Auch in Contao 3.5 wird jQuery im Header eingebunden.
22.05.2017, 16:47
Jens

Zitat:

Zitat von tab

Auch in Contao 3.5 wird jQuery im Header eingebunden.

hmm, stimmt, habe ich eben nochmal nachgeschaut. Beim letzten Projekt (allerdings verwendete ich dort ein Template) wurde es unten eingefügt. Ich muss mal schauen, wie RockSolid das gemacht hat. Es scheint zumindest nicht manuell eingebunden worden zu sein. Das heißt, theoretisch müsste es durch eines der Module bewerkstelligt worden sein ... hmm, soweit ich zumindest sehe.
22.05.2017, 22:22
Andreas

$GLOBALS['TL_JAVASCRIPT'] untersuchen. jQuery rausholen und nach $GLOBALS['TL_BODY'].
25.07.2017, 11:18
conter

Wo finde ich eigentlich überhaupt diese globals?

Viele Grüße,
conter
25.07.2017, 12:16
Spooky

Zitat:

Zitat von conter

Wo finde ich eigentlich überhaupt diese globals?

Viele Grüße,
conter

$GLOBALS ist das global verfügbare Array in PHP. In wie fern willst du es "finden"?
25.07.2017, 12:22
Andreas
In PHP-Code, der im FE oder BE ausgeführt wird.

Beispiele:
- system/config/dcaconfig.php
- system/config/initconfig.php
- system/modules/myModule/config/config.php
- {{file::myPHP.php}} // Datei in templates/
- {{file::myPHP.html5}} // Datei in templates/
- in FE-Templates
PHP-Code:

<?php dump($GLOBALS); dump($GLOBALS['TL_JAVASCRIPT']); ?>
25.07.2017, 14:14
conter

Hallo, ich wollte es nicht unbedingt finden, aber javascript ans Ende zu bringen finde ich auch interessant und bin aus Andreas Antwort nicht richtig schlau geworden ...
25.07.2017, 14:34
Andreas

Und jetzt? Immer noch nicht?

Ich binde z.B. ein Datei ins Layout ein über das Feld "Zusätzliche <head>-Tags"

Code:

{{file::load-resources.html5}}

In dieser Datei kannst du das JS dann untersuchen.

PHP-Code:

<?php dump($GLOBALS['TL_JAVASCRIPT']); // im HEAD dump($GLOBALS['TL_HEAD']); // auch im HEAD dump($GLOBALS['TL_BODY']); // am Ende von BODY ?>

Bin mir nicht ganz sicher mit den Positionen, aber kannst du ja leicht nochmal kontrollieren, wo was ausgegeben wird.

Wenn dir etwas nicht gefällt, kannst du es aus der Variablen rausnehmen und in eine andere packen. Z.B. aus TL_JAVASCRIPT rausnehmen und in TL_BODY hinzufügen.

Gleiches müsste auch mit einem j_- oder moo_-Template gehen. Z.B. mit j_my-js-and-css.html5. Also ohne {{file::load-resources.html5}}.

Änliches kann man auch mit CSS machen. Z.B. entferne ich das "|static" wenn ich im BE eingeloggt bin.

PHP-Code:

/* If a user is logged in */ if(sha1(session_id().(!Config::get('disableIpCheck') ? Environment::get('ip') : '').'BE_USER_AUTH') == Input::cookie('BE_USER_AUTH')) { // Code here }
25.07.2017, 16:27
mj1985

Ich werde aus der Antwort auch nicht schlau, habe die Sache aber selbst anders unter 4.4 gelöst. Ich habe mir ein Template "js_plugins.html5" angelegt und dort folgenden Inhalt reingeschrieben:

PHP-Code:

<?php $arrJsFullFiles = array ( 'assets/jquery/js/jquery.min.js', 'files/theme/plugins/bootstrap/js/bootstrap.min.js' ); $objJsCombiner = new \Combiner(); $objJsCombiner->addMultiple($arrJsFullFiles); $GLOBALS['TL_BODY'][] = '<script src="' . $objJsCombiner->getCombinedFile() . '"></script>'; ?>

Die Dateien werden bei mir noch zusammengeführt und dann gesammelt vor dem schließenenden Body-Tag ausgegeben. Den Haken bei "jQuery laden" habe ich auch noch rausgenommen. Das gleiche kann man auch mit CSS machen, anstatt "TL_BODY" dann mit "TL_HEAD".

Vielleicht bringt dich die Antwort weiter ...
25.07.2017, 18:47
Andreas

Ja, in meiner Datei steht das so ähnlich.

PHP-Code:

$combinedJS = new Combiner(); $combinedJS->add('files/js/a.js'); $combinedJS->add('files/js/b.js'); $GLOBALS['TL_BODY'][] = '<script src="'.$combinedJS->getCombinedFile().'"></script>';

Noch ne Info: TL_BODY und TL_HEAD erwarten reines HTML als String. Beispiel:

HTML-Code:

<script>// My code</script>

TL_JAVASCRIPT erwartet nur einen Pfad und optional noch einen Flag (|static). Beispiel:

Code:

'files/js/myfile.js|static'

Wenn man also jQuery im Layout nicht deaktiviert, dann geht man mit ner FOREACH über Tl_JAVASCRIPT und sucht nach dem was man nicht haben möchte. Wenn man dort z.B. "assets/jquery/core/" findet, kann man diese Array-Variable aus TL_JAVASCRIPT löschen.

Edit: Aber ich lade die Ressourcen nicht am Ende vom BODY, sondern ganz normal oben im HEAD.
25.07.2017, 22:23
ihkwdiopk

Es lebe HTTP/2 - da jedoch noch jung, bin ich dabei mit dem js ans Ende und Combiner drüberlaufen lassen.
18.02.2020, 10:00
WorkerBeeEu

Aktuell beschäftigt mich das auch. Wenn ich z.B. wiederverwendbare Templates mit anderen Assets benutzten will, werden diese separat nachgeladen - so wie es aktuell Standard ist:
https://github.com/psi-4ward/contao-...j_slider.html5

Das ist Mist, da wir dadurch relativ viele Requests haben, wenn wir Lightbox + Slider + whatever benutzen.

Aktuell nutze ich ein grunt-task um alles in eine JS zu pressen, die ich unten einfüge - nicht schön und nicht sehr contao-like :confused:
18.02.2020, 10:12
Spooky

Zitat:

Zitat von WorkerBeeEu

Das ist Mist, da wir dadurch relativ viele Requests haben, wenn wir Lightbox + Slider + whatever benutzen.

Pro Client nur einmal, dann sind die Assets gecached. Und mit HTTP/2 ist es auch weniger schlimm.
18.02.2020, 14:16
WorkerBeeEu

Zitat:

Zitat von Spooky

Pro Client nur einmal, dann sind die Assets gecached. Und mit HTTP/2 ist es auch weniger schlimm.

Alles korrekt, ist Lighthouse aber praktisch egal - der Score ist für das Ranking aussagekräftig. Pagespeed und Co prüfen zwar die Cache-Dauert, rufen aber ohne Cache die Seite ab.
18.02.2020, 14:28
Spooky

Was genau beanstandet PageSpeed?
18.02.2020, 14:40
WorkerBeeEu

Zitat:

Zitat von Spooky

Was genau beanstandet PageSpeed?

Mit HTTP/2 an sich erst einmal nichts weiter. Die Zeiten, wo wir uns mit dem "Es werden zu viele Anfragen an den Server gesendet" rumärgern müssen, sind ja fast schon vorbei :D