页面加载jQuery之前的页面预加载器答案

【问题标题】：Page preloader before page load jquery页面加载jQuery之前的页面预加载器
【发布时间】：2018-05-03 09:32:58
【问题描述】：

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

但没有显示加载程序，控制台中也没有显示错误。任何人都可以给我任何解决方案或例子吗？

提前致谢！

【问题讨论】：

如果这仅适用于您第一次打开页面（或刷新页面），请从样式属性中删除display:none，以便立即可见。如果ajaxComplete() 处理程序正在工作，那么这应该就是您所需要的。此外，如果您正在设置 display 值，那么您可以删除 .show() 和 .hide()，因为它们就是这样做的。

标签： javascript jquery laravel loader

【解决方案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>

【讨论】：

欢迎@TahmidSaim 兄弟。