页面加载前的页面预加载器 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>

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

Page preloader before page load jquery

javascript

jquery

loader

laravel