SVG动画可能是这个问题的更好解决方案。你不需要担心写CSS和相比gif，你会得到更好的分辨率和alpha透明度。可以使用的一些非常好的SVG加载动画在这里:http://samherbert.net/svg-loaders/

你也可以通过我创建的服务https://svgbox.net/iconset/loaders直接使用这些动画。它允许您自定义填充和直接使用(盗链)是允许的。

要用jQuery完成你想做的事情，你可能应该隐藏一个加载信息元素，并在你想显示加载器时使用.show()。例如，这段代码显示了一秒钟后的加载器:

setTimeout(函数(){ $(" #负载”),告诉(); }, 1000) < script src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js " > < /脚本> <div id="load" style="display:none"> 请稍等… < img src = " / / s.svgbox.net/loaders.svg ?填补= maroon&ic =困境” 风格= " 24像素宽度:" > < / div >

如果你正在使用Turbolinks With Rails，这是我的解决方案:

这是CoffeeScript

$(window).on 'page:fetch', ->
  $('body').append("<div class='modal'></div>")
  $('body').addClass("loading")

$(window).on 'page:change', ->
  $('body').removeClass("loading")

这是基于Jonathan Sampson的第一个优秀答案的SASS CSS

# loader.css.scss

.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, 0.4)
            asset-url('ajax-loader.gif', image)
            50% 50% 
            no-repeat;
}
body.loading {
    overflow: hidden;   
}

body.loading .modal {
    display: block;
}

乔纳森出色的解决方案在IE8中中断(动画根本不显示)。要解决这个问题，将CSS更改为:

.modal {
display:    none;
position:   fixed;
z-index:    1000;
top:        0;
left:       0;
height:     100%;
width:      100%;
background: rgba( 255, 255, 255, .8 ) 
            url('http://i.stack.imgur.com/FhHRx.gif') 
            50% 50% 
            no-repeat;
opacity: 0.80;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 80);
filter: alpha(opacity = 80)};

至于实际加载的图像，请查看这个网站的一堆选项。

至于在请求开始时显示带有此图像的DIV，您有几个选择:

A)手动显示和隐藏图像:

$('#form').submit(function() {
    $('#wait').show();
    $.post('/whatever.php', function() {
        $('#wait').hide();
    });
    return false;
});

B)使用ajaxStart和ajaxComplete:

$('#wait').ajaxStart(function() {
    $(this).show();
}).ajaxComplete(function() {
    $(this).hide();
});

使用这个元素将显示/隐藏任何请求。可能是好也可能是坏，取决于需要。

C)对特定的请求使用单独的回调:

$('#form').submit(function() {
    $.ajax({
        url: '/whatever.php',
        beforeSend: function() { $('#wait').show(); },
        complete: function() { $('#wait').hide(); }
    });
    return false;
});

fontaweesome有一个加载动画图标，可以直接在你的项目中使用，没有任何额外的数据负担，如果你已经在使用字体awesome。

<span id="loading" style="display:none"><i class="fa fa-spinner fa-pulse"></i> PLEASE WAIT </span>

然后是jquery，你可以使用下面的代码来显示隐藏元素。

$(document).ajaxSend(function() {
    $('#loading').show();
});

$(document).ajaxComplete(function() {  
    $('#loading').hide();
});

这将使按钮消失，然后“加载”的动画将出现在它们的位置，最后只显示成功消息。

$(function(){
    $('#submit').click(function(){
        $('#submit').hide();
        $("#form .buttons").append('<img src="assets/img/loading.gif" alt="Loading..." id="loading" />');
        $.post("sendmail.php",
                {emailFrom: nameVal, subject: subjectVal, message: messageVal},
                function(data){
                    jQuery("#form").slideUp("normal", function() {                 
                        $("#form").before('<h1>Success</h1><p>Your email was sent.</p>');
                    });
                }
        );
    });
});