Jquery preloader não funcionando corretamente

E aí pessoal, beleza?

Bom, estou utilizando um preloader, funcionando parcialmente.. É o seguinte:

Quando eu clico em um link dentro do meu WebSite ele faz o fadein do preloader e permanece por um determinado período de tempo, 2s e depois some.

O problema é que:

1º- ele some abruptamente, não estou conseguindo fazer um fadeOut do preloader e um fadeIn do novo conteúdo

2º- Quero ter um tempo mínimo de permanência do preloader (2s) para manter a dinâmica do site, mas quando a página precisa de mais tempo, não estou conseguindo deixar. Por exemplo: Permanecer por pelo menos 2s ou pelo tempo necessário para fazer o load na página.

Caso vocês queiram visualizar melhor esses problemas, o link de testes que tenho é esse: http://testecmt.hol.es/

E aqui está o código que estou usando:

jquery:

$(document).ready( function(){
	var loader = '<div class="loader"></div>'
	$('#content').load('content/home.html');
	$('body').on( 'click', 'a', function(event) {
 event.preventDefault();

 var page = $(this).attr('href');
 var load = $(loader);
 var content = $('#content');

 console.log('Clicado em '+ page +'.html');

 content.prepend(load.fadeIn(1000));
 setTimeout(function() {
 content.load('content/' + page + '.html').fadeIn(1500);
 }, 4000);
	});
});

Alguém consegue me ajudar? Ou me dar uma dica do que eu preciso ir procurando para fazer isso?

Ps.: Se possível alguma referência para estudo junto, pois estou começando jquery agora e quero estudar mais.