每当发生 ajax 调用时,我都会使用 jQuery 显示加载图标,如下所示:
$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 文件中,我只想在
中显示加载"div id= box1"
最佳答案
vijayP 的评论是正确的方向。
必须修改 CSS,因为您已将加载类限制为仅 body 元素。
.loading {
overflow: hidden;
}
.loading .modal {
display: block;
}
然后在 JavaScript 中:
$(document).on({
ajaxStart: function() { $("#box1").addClass("loading"); },
ajaxStop: function() { $("#box1").removeClass("loading"); }
});
关于javascript - 使用 jquery 加载动画以显示在特定的 div 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39032139/