javascript - 如何显示加载指示器？

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 */
}