Question

当我调用一些ajax方法时，我有自定义加载栏，它在firefox中完美运行

我的代码是这样的。的 HTML ：

<div id="loading_dim" >
     <div></div>
</div>

css ：

 #loading_dim {
      position: fixed;
      left:0;
      right:0;
      top:0;
      bottom:0;
      background: url('/../img/glass.png');
      display: none; 
 }
 #loading_dim > div {
      position: fixed;
      left:0;
      right:0;
      top:0;
      bottom:0;
      background: url('/../img/processing.gif') center center no-repeat;
 }

JAVASCRIPT ：

 $('#loading_dim').show();

Ajax代码......

 $('#loading_dim').hide();

我还尝试了其他方法，例如jquery .css('display','block')和javascript document.getelementbyid(elementID).style.display='block'; 所有在firefox中工作但不在chrome或IE中工作。

Answer 1

<style>
#loading_dim > div {
    position: fixed;
    display: none; 
}
</style>
<div id="loading_dim" >
     <div>Loading</div>
</div>

<br/><br/><br/><br/><br/>
<div>
<input type=button onclick="showF()" value="Show">
<input type=button onclick="hideF()" value="Hide">
</div>
<script src="jquery-1.11.1.min.js"></script>
<script>
function showF(){
    $("#loading_dim").find("div").show("slow");
}

function hideF(){
    $("#loading_dim").find("div").hide("slow");
}
</script>

Answer 2

在成功方法中添加$('#loading_dim').hide();。如果不能像这样改变ajax调用

function(){
 $.ajax({
 url: 'your url',
 type: 'POST',
 data: {},
 async: false,
 success: function() {}
});

进度加载栏不在chrome和IE中工作

2 个答案: