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

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();
                    });
            });