使用 css 类设置 ajax 加载器？答案

【问题标题】：Use css class to set ajax loader?使用 css 类设置 ajax 加载器？
【发布时间】：2016-12-02 15:30:26
【问题描述】：

我有 Ajax 调用，我想使用 ajax-loader.gif 来显示加载过程。我已经有用于在屏幕上显示元素的 html span 元素。我想在 css 类中添加加载器。一旦 ajax 启动，我想指向 html 元素并使用 JQuery 添加类，一旦 ajax 完成，我将删除该类并隐藏元素。这是我尝试使用但屏幕上没有显示的代码：

CSS：

.loader{
   background-image: url('Images/ajax-loader.gif');
   height: 100px;
   width: 100%;
}

HTML：

<span>
    <span class="progressMsg" id="progressMsg"></span>
</span>

JQuery:

$('.progressMsg').addClass("loader").show();
$.ajax({
    type: 'POST',
    url: 'my URL',
    data: myForm
}).done(function(obj){
    if(obj.STATUS === 200){
        $('.progressMsg').removeClass("loader").hide();
        return true;
    }else{
        $('.progressMsg').addClass('alert-box error').show().html('Error!');
        setTimeout(function(){ $('.progressMsg').removeClass("alert-box error").hide().html(""); }, 5000);
        return false;
    }
}).fail(function(jqXHR, textStatus, errorThrown){
    alert(errorThrown);
});

【问题讨论】：

确保 .progressMsg 具有实际尺寸，并且不是 0 x 0 像素
是的，问题是您的容器没有定义高度和宽度。设置这些属性，您将看到您的图像。

标签： jquery html css ajax loader

【解决方案1】：

跨度没有空间母鸡空。您需要将其设为块/内联块并设置尺寸。

$('.progressMsg').addClass("loader").show();

.loader{
   background-image: url('http://www.ajaxload.info/cache/FF/FF/FF/00/00/00/1-0.gif');
   height: 100px;
   width: 100%;
   display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>
    <span class="progressMsg" id="progressMsg"></span>
</span>

【讨论】：

diplay:inline-block 是关键。在我把它放在我的 css 加载器中之后出现了。

【解决方案2】：

您必须为元素添加高度和宽度，否则它将有 0x0px 并且不会显示任何内容。

.loader{
    background:black url('images/ajax-loader.gif') no-repeat 10px 50%;
    border:1px solid #8ed9f6;
    heigth: 50%;
    width: 10px;
}

See here

【讨论】：

@epascarello 我用我尝试使用但屏幕上仍然没有任何内容的代码更新了我的问题...
这不是我的答案，但问题是 inilne 元素没有宽度
@epascarello on .progressMsg 类我设置了宽度和高度，但屏幕上仍然没有显示任何内容。
是的，但是内联元素没有宽度。跨度没有宽度