如何显示加载指标？

Question

我有以下CSS代码加载的指标：

.indicator { 
    display:none; 
    margin:0px; 
    paddingLeft:0px; 
    paddingRight:0px; 
    paddingTop:0px; 
    paddingBottom:0px; 
} 

指标HTML代码：

<img class='indicator' id='ajaxBusy' src='/ajax-loader.gif'> 

，并按照显示指示代码：

$('.page_button').live('click',function() { 

    $('#ajaxBusy').show(); 
    $.post("url", 
     function(data) 
     { 
      if (data != "") 
      { 
       //some actions  
      } 
      $('#ajaxBusy').hide(); 
     }); 
}); 

它的代码工作不错，但有一些小的细节：当指标出现时，其下的其他页面内容向下移动一行。当指标消散时，这条线消失了。我想删除它。我该怎么做？

Answer 1

添加position:absolute; & z-index:99;到.indicator类。

.indicator { 
    display:none; 
    margin:0px; 
    paddingLeft:0px; 
    paddingRight:0px; 
    paddingTop:0px; 
    paddingBottom:0px; 
    position:absolute; /* Add This */ 
    z-index:99; /* Add This */ 
} 

Answer 2

更改您的HTML

<span id='ajaxBusy' style="z-index:99999;"><img class='indicator' src='/ajax-loader.gif'> 
</span> 

和你jQuery来：

$('body').delegate('.page_button','click',function() { 

       $('#ajaxBusy').show(); 
       $.post("url", 
        function(data) 
        { 
         if (data != "") 
         { 
          //some actions  
         } 
         $('#ajaxBusy').hide(); 
        }); 
      });