Question

我有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);
});

Answer 1

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

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

See here

使用css类来设置ajax加载器？

1 个答案: