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

如何显示加载指示？

2 个答案: