第一次调用时，Ajax加载动画未动画

Question

我想在进行Ajax调用时向用户显示以下动画GIF：

GIF按预期显示，并且在通话期间显示，但在第一次通话期间不会显示动画。在随后的调用中，它是动画的，使得看起来好像浏览器在缓存GIF动画时很慢。

jQuery的：

$body = $("body");
$(document).on({
  ajaxStart: function() {
    $body.addClass("loading");
  },
  ajaxStop: function() {
    $body.removeClass("loading");
  }
});

CSS：

.modal1 {
  display:    none;
  position:   fixed;
  z-index:    1000;
  top:        0;
  left:       0;
  height:     100%;
  width:      100%;
  background: rgba( 255, 255, 255, .8 )
  url(../images/loader.gif)
  50% 50%
  no-repeat;
}

body.loading {
 overflow: hidden;
}

body.loading .modal1 {
  display: block;
}

This问题涵盖了Ajax调用后出现的动画，this问题的答案与我的实现不符。