отображение загрузки gif в определенном div в то время как ajax загрузка

Question

ниже коды отображают загрузку gif, пока ajax загружает данные. Коды ниже отображают 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>