jQuery teilweise ausgeführt

[j4nk3y]

Salve,

folgendes Problem welches ich mir nicht erklären kann. Ich versuche meine Javascript/jQuery durch Funktionen logisch zu trennen.
Dabei rufe ich eine Funktion auf und im ersten Schritt werden die benötigten Templates mittels .load(). aus einer externen PHP datei geladen und dann das DOM zusammengebastelt. in der loadIndex ist auch ein Login Formular, welches dann per .on('click') per $.ajax(), die eigegebenen Daten an die login.php schickt. Wenn nun der AJAX Request erfolgreich war und die richtigen Daten von der login.php zurück kommen, soll nun die nächste Funktion ausgeführt werden. Hier werden dann wieder neue Templates geladen. Soweit klappt das auch sehr gut. Danach kommt nun der logische Schritt das DOM neu zu erstellen. aber es scheitert schon an dem ersten Befehl den "Load Screen" zu verstecken.

Aber der Code spricht mehr als 1000 Worte:

$(function(){
	
	var $body = $('body');
	var $loader = $('#loader_wrapper'); // Load Screen Container
	
	loadIndex();
	
	function loadIndex(){
		
		$body.append('<div id="templates"></div>');
		
		$('#templates').load("../../templates/indexTemplates.php", function(){
			
			// Append Elements to the DOM
			
			$body.append('<main class="flex_row" id="main_index"></main>');
			var $main = $('main');
			
			// Append Navigation
			
			$main.append(Mustache.render(...));
			
			// Append login formular
			
			$main.append(Mustache.render(...));
			
			// Attach Eventlistener to Login Button
			
			$('#login').on('click', function(e) { 
				e.preventDefault();
				
				$('#login').hide();
				
				var pass_field_name = $('#pass_field_name').val();
				var data = {
					user: $('#login_user').val(),
					pass_field_name: pass_field_name
				}
				
				data[pass_field_name] = $('#' + pass_field_name).val();
				
				$.ajax({
					type: "POST",
					url: "../functions/server/php/login.php",
					data: data,
					success: function(text){
						var response = JSON.parse(text);
						if(typeof(response) === "object"){
							
							$loader.fadeIn( 1000 ).queue(function(){ loadLobby( response ); }); // Login erfolgreich -> loadLobby()
						}
						else{
							$('#login_error').append('<p class="label">' + response + '</p>');
							$('#login').show();
						}
					}
				});
			});
			
			// Hide loadscreen
			
			$loader.delay(2000).fadeOut( 1000 );
		});
	}
	
	function loadLobby( response ){
		
		$('#templates').load("../../templates/lobbyTemplates.php", function(){

			console.log(response); // funktioniert
			$loader.fadeOut( 1000 ); // funktioniert nicht
			
		});
		
	};

Also in kurz: Ich kann mir nicht erklären warum $loader.fadeOut( 1000 ); in der loadLobby() nicht funktioniert/ausgeführt wird.

Danke euch!
Gruß
Jo