jQuery 加载动画不起作用

Question

我在使用 Jonathan Sampson 的以下解决方案时遇到了一个小问题：jQuery “Please Wait, Loading…” animation?

我正在使用 jQuery 2.1.3，但似乎无法正常工作。

$body = $("body");
$(document).ajaxStart(function () {
    $("body").addClass("loading");
    $('.modal').fadeIn(500);
});
$(document).ajaxStop(function () {
    $("body").removeClass("loading");
    $('.modal').fadeOut(500);
});

我的 footer.php 看起来像这样。所有链接都有效，我什至没有收到错误。

<div class="modal"><!-- Place at bottom of page --></div>       
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<script src="js/Magnific-Popup-master/dist/jquery.magnific-popup.js"></script>
<script src="js/kswedberg-jquery-smooth-scroll-dc770ba/jquery.smooth-scroll.js"></script>
<script src="js/main.js"></script>

当我在 firebug 中手动将 "loading" class 添加到我的 body 时，它正在工作。所以我认为这是一个 jQuery 问题。非常感谢您的帮助。

Answer 1

尝试

$(document).on({
   ajaxStart: function() {
     $("body").addClass("loading").find(".modal").fadeIn(500)
   },
   ajaxStop: function() {
     $("body").removeClass("loading").find(".modal").finish().fadeOut(500)
   }
 }).ready(function() {
   $.ajax({url:"", method:"HEAD"})
 });

$(document).on({
   ajaxStart: function() {
     $("body").addClass("loading").find(".modal").fadeIn(500)
   },
   ajaxStop: function() {
     $("body").removeClass("loading").find(".modal").finish().fadeOut(500)
   }
 }).ready(function() {
   $.ajax({url:"http://lorempixel.com/0/0/", method:"HEAD"})
 });

.modal {
  font-size: 36px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="modal">modal</div>

jQuery 加载动画不起作用

jQuery Loading Animation doesn't work

ajax

jquery

animation

request