显示在ajax加载时加载特定div中的gif(display loading gif in specific a div while ajax loading)

显示在ajax加载时加载特定div中的gif(display loading gif in specific a div while ajax loading)

下面的代码是在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>

below codes are to display loading gif while ajax is loading data. The codes below displaying the gif for the whole page of my browser. But I want it to display only at div-Summary-Report. Is it able to do this?

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

最满意答案

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

This is would solve your problem. Place loading gif inside div hidden and when ajax starts show gif and when ajax complete hide gif again.

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