我如何才能创建一个；请稍候，正在加载…”；使用jQuery制作动画？

我想在我的网站上放置一个“请稍候，正在加载”的旋转圈动画。我应该如何使用jQuery实现这一点呢？

至于实际加载的图像，有很多选项

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

A） 手动显示和隐藏图像：

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

B） 使用和：

使用此选项，元素将显示/隐藏任何请求。根据需要，可以是好的，也可以是坏的

C） 对特定请求使用单个回调：

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

---

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

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

$（函数（）{
$（“#提交”）。单击（函数（）{
$（“#提交”）.hide（）；
$（“#form.buttons”）.append（“”）；
$.post（“sendmail.php”，
{emailFrom:nameVal，subject:subjectVal，message:messageVal}，
功能（数据）{
jQuery（“#form”）.slideUp（“normal”，function（）{
$（“#表单”）。之前（'Success您的电子邮件已发送。
'）；
});
}
);
});
});

你可以从网站文件Hierarchy的某个地方抓取一个旋转圆圈的动画GIF。然后，您只需要添加一个带有正确代码的HTML元素，并在完成后将其删除。这相当简单：

function showLoadingImage() {
    $('#yourParentElement').append('<div id="loading-image"><img src="path/to/loading.gif" alt="Loading..." /></div>');
}

function hideLoadingImage() {
    $('#loading-image').remove();
}

$body = $("body");

$(document).on({
    ajaxStart: function() { $body.addClass("loading");    },
     ajaxStop: function() { $body.removeClass("loading"); }    
});

这有几个警告：首先，如果你有两个或两个以上的地方可以显示加载图像，你将需要以某种方式记录一次有多少个调用正在运行，并且只在它们全部完成时隐藏。这可以使用一个简单的计数器来完成，它几乎适用于所有情况

---

其次，这只会在成功的AJAX调用中隐藏加载图像。要处理错误状态，您需要研究，这比

$.load

、

$.get

等更复杂，但也要灵活得多。

您可以用各种不同的方法来处理。它可能是一种微妙的状态，比如页面上的一个小状态显示“正在加载…”，也可能是整个元素在加载新数据时使页面变灰。下面我将介绍如何实现这两种方法

设置 让我们先从一个漂亮的“加载”动画开始 我会用

让我们创建一个元素，在发出ajax请求时可以随时显示/隐藏该元素：

<div class="modal"><!-- Place at bottom of page --></div>

最后是jQuery 好的，转到jQuery。下一部分其实很简单：

function showLoadingImage() {
    $('#yourParentElement').append('<div id="loading-image"><img src="path/to/loading.gif" alt="Loading..." /></div>');
}

function hideLoadingImage() {
    $('#loading-image').remove();
}

$body = $("body");

$(document).on({
    ajaxStart: function() { $body.addClass("loading");    },
     ajaxStop: function() { $body.removeClass("loading"); }    
});

就这样！只要触发

ajaxStart

或

ajaxStop

事件，我们就会将一些事件附加到body元素。当ajax事件开始时，我们将“加载”类添加到主体中。当事件完成时，我们从主体中移除“加载”类

---

查看它的实际操作：

jQuery为AJAX请求的开始和结束提供了事件挂钩。你可以勾入这些来显示你的加载器

例如，创建以下div：

<div id="spinner">
  <img src="images/spinner.gif" alt="Loading" />
</div>

只需在关闭body标签之前或您认为合适的任何地方，将此Javascript块添加到页面的末尾

---

现在，无论何时发送Ajax请求，都会显示

#spinner

div。当请求完成时，它将再次被隐藏。

以及Jonathan和Samir的建议（两个答案都很好，顺便说一句！），jQuery有一些内置事件，它会在发出ajax请求时为您触发

有一件事

每当AJAX请求启动时显示一条加载消息（并且没有一条处于活动状态）

…是兄弟，这件事

附加一个在所有AJAX请求结束时执行的函数。这是一个Ajax事件

总之，当页面上任何地方发生ajax活动时，它们都是显示进度消息的好方法

HTML:

---

请注意，在使用ASP.Net MVC时，如果

使用（Ajax.BeginForm（…

），则设置

ajaxStart

将不起作用

使用

AjaxOptions

解决此问题：

(Ajax.BeginForm("ActionName", new AjaxOptions { OnBegin = "uiOfProccessingAjaxAction", OnComplete = "uiOfProccessingAjaxActionComplete" }))

---

Jonathon的优秀解决方案突破了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)};

---

如果您将TurboLink与Rails一起使用，这是我的解决方案：

这是咖啡脚本

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

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

---

就像Mark H所说的，blockUI就是一种方式

例：

//ajax活动停止时取消阻止
$（文档）.ajaxStop（$.unbui）；
$（“#下载按钮”）。单击（函数（）{
$（“#对话框”）。对话框({
宽度：“390px”，
莫代尔：是的，
按钮：{
“好的，AGUARDO电子邮件！”：function（）{
$.blockUI（{消息：'}）；
send（）；
}
}
});
});
函数send（）{
$.ajax({
url:“下载enviar.do”，
类型：“POST”，
喋喋不休
});
}

---

备注：我在

上获得了ajax-loader.gif，请将此代码放在您的body标签上

<div class="loader">
<div class="loader-centered">
    <div class="object square-one"></div>
    <div class="object square-two"></div>
    <div class="object square-three"></div>
</div>
</div>
<div class="container">
<div class="jumbotron">
    <h1 id="loading-text">Loading...</h1>
</div>
</div>

加载。。。

然后使用这个jquery脚本

<script type="text/javascript">

jQuery(window).load(function() {
//$(".loader-centered").fadeOut();
//in production change 5000 to 400
$(".loader").delay(5000).fadeOut("slow");
$("#loading-text").addClass('text-success').html('page loaded');
});
</script>

jQuery（window）.load（函数（）{
//$（“.loader居中”）.fadeOut（）；
//生产变更5000至400
$（“.loader”）。延迟（5000）。淡出（“慢”）；
$（“#加载文本”）.addClass（'text-success'）.html（'page-loaded'）；
});

请参见此处的完整示例

---

我看到的大多数解决方案要么希望我们设计一个加载覆盖，将其隐藏，然后在需要时取消隐藏，要么显示gif或图像等

我想开发一个健壮的插件，通过简单的jQuery调用，我可以显示加载屏幕，并在任务完成时将其拆下

下面是代码。它取决于字体和jQuery：

/**
 * Raj: Used basic sources from here: http://jsfiddle.net/eys3d/741/
 **/


(function($){
    // Retain count concept: http://stackoverflow.com/a/2420247/260665
    // Callers should make sure that for every invocation of loadingSpinner method there has to be an equivalent invocation of removeLoadingSpinner
    var retainCount = 0;

    // http://stackoverflow.com/a/13992290/260665 difference between $.fn.extend and $.extend
    $.extend({
        loadingSpinner: function() {
            // add the overlay with loading image to the page
            var over = '<div id="custom-loading-overlay">' +
                '<i id="custom-loading" class="fa fa-spinner fa-spin fa-3x fa-fw" style="font-size:48px; color: #470A68;"></i>'+
                '</div>';
            if (0===retainCount) {
                $(over).appendTo('body');
            }
            retainCount++;
        },
        removeLoadingSpinner: function() {
            retainCount--;
            if (retainCount<=0) {
                $('#custom-loading-overlay').remove();
                retainCount = 0;
            }
        }
    });
}(jQuery)); 

调用：

$.loadingSpinner();
$.removeLoadingSpinner();

---

对于其他帖子，这里有一个非常简单的解决方案，使用CSS3和jQuery，而不使用任何其他外部资源或文件

$（“#提交”）。单击（函数（）{
$（this）.addClass（'button_loader'）.attr（'valu
# 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;
}

<script type="text/javascript" src="javascript/jquery/jquery.blockUI.js"></script>
<script>
// unblock when ajax activity stops
$(document).ajaxStop($.unblockUI); 

$("#downloadButton").click(function() {

    $("#dialog").dialog({
        width:"390px",
        modal:true,
        buttons: {
            "OK, AGUARDO O E-MAIL!":  function() {
                $.blockUI({ message: '<img src="img/ajax-loader.gif" />' });
                send();
            }
        }
    });
});

function send() {
    $.ajax({
        url: "download-enviar.do",          
        type: "POST",
        blablabla
    });
}
</script>

<div class="loader">
<div class="loader-centered">
    <div class="object square-one"></div>
    <div class="object square-two"></div>
    <div class="object square-three"></div>
</div>
</div>
<div class="container">
<div class="jumbotron">
    <h1 id="loading-text">Loading...</h1>
</div>
</div>

<script type="text/javascript">

jQuery(window).load(function() {
//$(".loader-centered").fadeOut();
//in production change 5000 to 400
$(".loader").delay(5000).fadeOut("slow");
$("#loading-text").addClass('text-success').html('page loaded');
});
</script>

/**
 * Raj: Used basic sources from here: http://jsfiddle.net/eys3d/741/
 **/


(function($){
    // Retain count concept: http://stackoverflow.com/a/2420247/260665
    // Callers should make sure that for every invocation of loadingSpinner method there has to be an equivalent invocation of removeLoadingSpinner
    var retainCount = 0;

    // http://stackoverflow.com/a/13992290/260665 difference between $.fn.extend and $.extend
    $.extend({
        loadingSpinner: function() {
            // add the overlay with loading image to the page
            var over = '<div id="custom-loading-overlay">' +
                '<i id="custom-loading" class="fa fa-spinner fa-spin fa-3x fa-fw" style="font-size:48px; color: #470A68;"></i>'+
                '</div>';
            if (0===retainCount) {
                $(over).appendTo('body');
            }
            retainCount++;
        },
        removeLoadingSpinner: function() {
            retainCount--;
            if (retainCount<=0) {
                $('#custom-loading-overlay').remove();
                retainCount = 0;
            }
        }
    });
}(jQuery)); 

#custom-loading-overlay {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: #000;
    opacity: 0.8;
    filter: alpha(opacity=80);
}
#custom-loading {
    width: 50px;
    height: 57px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -28px 0 0 -25px;
}

$.loadingSpinner();
$.removeLoadingSpinner();

.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<body>

  <div id="cover"> <span class="glyphicon glyphicon-refresh w3-spin preloader-Icon"></span>Please Wait, Loading…</div>

  <h1>Dom Loaded</h1>
</body>

#cover {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: #141526;
  z-index: 9999;
  font-size: 65px;
  text-align: center;
  padding-top: 200px;
  color: #fff;
  font-family:tahoma;
}

$(window).on('load', function () {
  $("#cover").fadeOut(1750);
});

$.ajax({ 
    type: 'ajax',
    method: 'post',
    url: '<?php echo base_url()?>skargi/osluga_skarg',
    data: { full_date: full_date, head_title: head_title },
    //async: false,             
    dataType: 'json',
    beforeSend: function() { $body.addClass("loading"); },
    success: function(data) {   
        $body.removeClass("loading");