Предварительный загрузчик страницы перед загрузкой страницы jquery

Question

Я совершенно новый в jQuery. Я пытаюсь показать загрузчик до того, как все содержимое моей страницы будет готово.

<script>
$(document).ready(function(){
    $(document).ajaxStart(function(){
        console.log('wait');
        $("#wait").css("display", "block").show();
    });
    $(document).ajaxComplete(function(){
        $("#wait").css("display", "none").hide();
    });
});

и в теле у меня это,

<div id="wait" style="display:none;position:absolute;top:20%;left:50%;"><img src="{{ asset('assets/global/img/ajax-loader.gif') }}" /></div>

, но загрузчик не отображается и в консоли не отображается сообщение об ошибке. Кто-нибудь может дать мне какое-нибудь решение или пример по этому поводу?

Спасибо заранее!

Answer 1

Проверьте демонстрационный код ниже.

$(document).ready(function(){
		$('#loader').fadeOut(showBodyPart);
		

		function showBodyPart(){
			$('#body_parts').fadeIn(300);
		}
	})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loader">
     <img src="http://i.imgur.com/KUJoe.gif" id="a" alt="Loading" />
     Loading...
</div>

<div id="body_parts" style="display: none;">
	<p>If you click on me, I will disappear.</p>
	<p>Click me away!</p>
	<p>Click me too!</p>
</div>