Script erst am Ende laden?

[Open Thought]

Hi,

ich möchte diese riesen Javascript Files in meiner Seite aus Performancegründen erst am Ende laden.
Es gibt aber ein Problem: Ich habe <script> Blöcke die vorher drin sind und die dadurch nicht mehr funktionieren.
Um zu zeigen was ich meine ein kleines Beispiel:

<script type="text/javascript">
$(function(){
	alert("Test");
});
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

Da sagt er mir "$ not defined". Wenn ich jquery über dem alert Block lade geht es. Kann man dem Browser nicht sagen er soll erst alle Javascripts laden bevor er die script Blöcke ausführt? Oder muss ich das alles umschreiben?

[Gelöschter Benutzer]

Zwei Möglichkeiten:

1. du lädst erst jQuery und führst dann dein JS-Code aus (pack es einfach vor </body>)
2. du nutzt "normales" JS und injectest deine JS-Dateien in den dom, sobald das Dokument fertig geladen ist.

window.onload = function ()
{
loadJS('jquery.js');
loadJS('app.js'); //hier wäre dein alert('test'); drin
};

function loadJS(file)
{
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', file);
document.getElementsByTagName('head')[0].appendChild(script);
}

[Open Thought]

Naja also das Javascript im HTML (weiß nicht wie man das nennt, ich meine damit einen <script> tag wo nicht die .js Datei angegeben wird sondern direkt der Javascript Code drin steht, so wie bei meinem alert Beispiel oben) ist nur das was nötig ist drin also da werden eigentlich nur Variablen zugewiesen wie

var titel = "<?php echo $titel; ?>";

Das in eine extra Datei zu machen wäre also etwas blöd.
Es führt also kein Weg daran vorbei dass ich das Javascript im HTML auch nach unten lege nach jQuery?

[Gelöschter Benutzer]

Klar geht das, aber du optimierst an der falschen Stelle.

<script type="text/javascript">
var timer = setInterval(function ()
{
if(typeof($) != 'undefined')
{
//jQuery ist geladen
$(function(){
alert("Test");
});

clearInterval(timer);
}
}, 100);
</script>

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

oder

window.onload = function()
{
$(function() {
alert('jQuery ready');
});
};