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>

页面加载jquery之前的页面预加载器

1 个答案: