使用jquery加载动画以在特定div内显示 [英] loading animation using jquery to display inside a particular div

问题描述

每当进行如下ajax调用时，我都会使用jQuery显示加载图标:

I am displaying a loading icon using jQuery whenever an ajax call takes place as below:

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

.modal {
  display:    none;
  position:   fixed;
  z-index:    1000;
  top:        0;
  left:       0;
  height:     100%;
  width:      100%;
  background: rgba( 255, 255, 255, .8 ) 
    url('http://i.stack.imgur.com/FhHRx.gif') 
    50% 50% 
    no-repeat;
}
body.loading {
  overflow: hidden;   
}
body.loading .modal {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal"><!-- Place at bottom of page --></div>

无论何时发生Ajax，这都可以很好地加载，但是很明显，加载图标将显示在主体中，将UI隐藏在后面.取而代之的是，我只想显示该特定div内部的负载.在附件的html文件中，我要使加载仅显示在

This is loading fine whenever an ajax takes place, but its obvious the loading icon would be displaying in the body hiding the UI at the back. Instead of that I want to display the loading only inside that particular div. In the attached html file i want to make the loading display only inside the

"div id= box1"

链接到HTML文件

推荐答案

vijayP的评论是正确的方向.

The comment by vijayP is the right direction.

由于您已将加载类限制为仅body元素，因此必须修改CSS.

The CSS has to be modified since you have limited the loading class to only the body element.

.loading {
   overflow: hidden;   
}
.loading .modal {
   display: block;
}

然后在JavaScript中:

Then in the JavaScript:

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

这篇关于使用jquery加载动画以在特定div内显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！