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

这可以解决您的问题。将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>

显示在特定的div中加载gif，而ajax加载

1 个答案: