在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>

- erntay2

Answer 1

这将解决您的问题。在隐藏的 div 中放置加载 gif，当 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>

- user254153