在 ajax 加载时以特定 div 显示加载 gif

Question

下面的代码是在ajax加载数据时显示加载gif。下面的代码显示了我浏览器整个页面的 gif。但我希望它只显示在 div-Summary-Report 中。它能做到吗？

<div class="row">
    <div class="col-lg-12 div-Detailed-Report">
    //some content
    </div>
</div>

<div class="row">
    <div class="col-lg-12 div-Summary-Report">
    //some content
    </div>
</div>

<style type="text/css">
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('../../Content/kendoui/Bootstrap/loading_2x.gif') center no-repeat #fff;
}
</style>

<script>
$(document).ready(function () {
        $(document).ajaxStart(function () {
            $(".se-pre-con").show();
        }).ajaxStop(function () {
            $(".se-pre-con").hide();
        });
});

//some ajax function
</script>

Answer 1

这将解决您的问题。将正在加载的 gif 隐藏在 div 内，当 ajax 开始时显示 gif，当 ajax 完成时再次隐藏 gif。

<div class="row">
   <div class="col-lg-12 div-Summary-Report">
       <img src="loading.gif" class="loading">
   //some content
   </div>
 </div>

 <style type="text/css"> 
    .loading{display:none;}
 </style>

在 ajax 加载时以特定 div 显示加载 gif

display loading gif in specific a div while ajax loading

ajax

image-preloader