javascript - 页面加载 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();
    });
});

在 body 里我有这个，

<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>