Frage von nick2097, 117

JavaScript-Funktion vor Einbinden der externen Dateien aufrufen?

Guten Abend :)

Ich binde aufgrund der Performance in der besagten PHP-Datei meine Javascript Libraries kurz vom schließenden body-Tag ein.

Wie kann ich nun jedoch auf JS-Funktionen zurück greifen, die erst in den später eingebundenen Dateien definiert werden? Oder gibt es eine Alternative, mit der Voraussetzung, dass die JS-Dateien weiterhin zum Schluss eingebunden werden?

Frohe Ostertage und einen schönen Abend wünscht

nick2097 aka Nick

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von fluffiknuffi, 51


Wie kann ich nun jedoch auf JS-Funktionen zurück greifen, die erst in den später eingebundenen Dateien definiert werden? 

Logischer Weise... kannst du das nicht (direkt). Eine Alternative wäre einen Teil der Dateien im Head und einige am Ende vom Body einzubinden.

Siehe: http://t3n.de/magazin/7-tipps-fuer-schnellere-websites-turbolader-239321/ (Abschnitt 7)

Kommentar von nick2097 ,

Hallo fluffiknuffi,

Ja. So habe ich das jetzt übergangsweise auch gemacht. Aber ich hätte die JS-Dateien gerne an einer Stelle. Sollte das so nicht eigentlich über die

$( document ).ready(function() {

oder die

$(window).on('load', function(){

möglich sein, da so ja die eingebundenen Scripts vorher geladen werden und die Funktionen auch später? (siehe auch Kommentare Antwort 1)

Kommentar von fluffiknuffi ,

Sicher, vorausgesetzt du hast jQuery vorher geladen :p

Kommentar von nick2097 ,

Natürlich... haha wie dumm von mir, erwarte dass er eine jQuery-Funktion(!) versteht, ohne dass jQuery überhaupt vorher geladen wurde xD Hab es dann jetzt so gemacht, dass lediglich jQuery im <head> geladen wird und dank

$( document ).ready(function() {


zeigt er nun doch die Benachrichtigung an ^^
Danke Dir! ;)

Antwort
von MonkeyKing, 79

Hi Nick,

das kannst du machen wenn deine Seite zum Seitenaufbau nicht umbedingt die JS libraries benötigen. Dann kannst du deine Funktionen z.B. mit dem body "onload" Event oder der jQuery $(document).load(function () {}) Funktion wenn du jQuery verwendest oder du kannst einfach deine Funktionen mit der letzten Datei aufrufen, die du einbindest. Ich hoffe das hilft.

Kommentar von nick2097 ,

Hallo MonkeyKing, danke für deine schnelle Antwort. Vermutlich meintest du die:

$( document ).ready(function() {

Das habe ich schon probiert, hat jedoch leider auch nicht funktioniert :/

Kommentar von Sarkophator ,

Dann läuft aber wahrscheinlich was anderes verkehrt, wenn du diese erst nach dem Laden des Dokuments versuchst aufzurufen und es trotzdem nicht funktioniert. Sicher dass die Funktionen im Global Scope definiert sind und auch keine Syntaxfehler o.ä. in den Dateien vorliegen, d.h. also dass die JavaScripts geladen und ausgeführt wurden?

Ansonsten ist es schwierig dir zu helfen, ohne weitere Informationen zu haben.

Kommentar von nick2097 ,

Also es ist so. Ich habe die Funktion, die aufgerufen werden soll nun direkt in ein JavaScript-Tag gepackt, die nun direkt nach dem öffnenden body-Tag definiert wird:

<script type="text/javascript">
function notify(message, type, animIn, animOut, delay) {
$.growl({
message: message
}, {
type: type,
allow_dismiss: false,
label: 'Abbrechen',
className: 'btn-xs btn-inverse',
placement: {
from: 'top',
align: 'right'
},
delay: delay,
animate: {
enter: animIn,
exit: animOut
},
offset: {
x: 20,
y: 85
}
});
}
</script>

Diese wird dann später abhängig von einer if-Abfrage augerufen:

if($aenderung){
echo "
<script type=\"text/javascript\">
notify('Du hast dich erfolgreich freigeschaltet.', 'success', 'animated flipInY', 'animated flipOutY', '2500');
</script>
";
}

Dadurch sollte dann eine Benachrichtigung auftauchen. Tut sie jedoch nicht, wenn die benötigten Libraries kurz vorm schließenden body-Tag stehen. Binde ich die zwei benötigten Dateien jedoch ganz zu Anfang der Datei ein, z.B. direkt nach dem <body>, dann funktioniert es:

<body>
<script src="vendors/bower_components/jquery/dist/jquery.min.js"></script>
<script src="vendors/bootstrap-growl/bootstrap-growl.min.js"></script>

Das ist einmal jQuery und einmal die für die Benachrichtigungen. Sobald eine von den beiden erst später aufgerufen wird, taucht die Benachrichtigung nicht auf.

Kommentar von Spirit528 ,

Du verwendest in notify() ja jQuery. jQuery muss also geladen sein bevor die Methode aufgerufen wird.

Und btw: schon mal etwas von der Console gehört? Da siehst Du genau welche Fehler auftreten.

Kommentar von nick2097 ,

Ja, aber aber kann ich nicht igw sagen, dass er die Methode erst dann aufrufen soll, wenn die Skripte (inkl. jQuery) vollständig geladen sind? Die oben genannten Möglichkeiten funktionieren ja nicht.

Kommentar von MonkeyKing ,

Stimmt

Antwort
von Sarkophator, 22

Du könntest alternativ deinen Aufruf quasi zwischenspeichern und dann später über ein weiteres Scriptsnippet aufrufen:

var notificationsOnLoad = [];

function notify(message, type, animIn, animOut, delay) {
var callfn = function() {
$.growl({
message: message
}, {
type: type,
allow_dismiss: false,
label: 'Abbrechen',
className: 'btn-xs btn-inverse',
placement: {
from: 'top',
align: 'right'
},
delay: delay,
animate: {
enter: animIn,
exit: animOut
},
offset: {
x: 20,
y: 85
}
});
}

if(!window.jQuery)
notificationsOnLoad.push(callfn);
else
callfn();
}

Und später dann im Code (nach jQuery):

$(window).load(function() {
notificationsOnLoad.forEach(function(fn) { fn(); });
});
Kommentar von nick2097 ,

Danke für deine Mühe, Sarkophator :)

Es lag nun aber doch an mir, siehe Kommentare der Antwort von
fluffiknuffi ^^

War wohl einfach zu müde oder so xD

Keine passende Antwort gefunden?

Fragen Sie die Community