如何使用 jQuery 创建“请稍候，正在加载...”动画？

【问题标题】：How can I create a "Please Wait, Loading..." animation using jQuery?如何使用 jQuery 创建“请稍候，正在加载...”动画？
【发布时间】：2010-10-19 12:27:14
【问题描述】：

我想在我的网站上放置一个“请稍候，正在加载”旋转圆圈动画。我应该如何使用 jQuery 来完成这项工作？

【问题讨论】：

    标签： jquery animation


    【解决方案1】：

    Fontawesome 有一个加载动画图标，如果您已经在使用 font 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();
});

    【讨论】：

      【解决方案2】：

      我也发现了这样一个问题（挑战），在 DB 响应期间通知用户一些“信息”。

      我的解决方案可能与此处介绍的略有不同，是好是坏？我不知道，这对我来说已经足够了。

      $.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");

      【讨论】：

        【解决方案3】：

        SVG 动画可能是解决这个问题的更好方法。您无需担心编写 CSS，与 GIF 相比，您将获得更好的分辨率和 alpha 透明度。您可以使用一些非常好的 SVG 加载动画：http://samherbert.net/svg-loaders/

        您还可以通过我构建的服务直接使用这些动画：https://svgbox.net/iconset/loaders。它允许您自定义填充并允许直接使用（盗链）。

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

        setTimeout(function() {
  $("#load").show();
}, 1000)
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<div id="load" style="display:none">
    Please wait... 
    <img src="//s.svgbox.net/loaders.svg?fill=maroon&ic=tail-spin" 
         style="width:24px">
</div>

        【讨论】：

          【解决方案4】：

          将此代码放在您的身体标签上

          <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>

          在此处查看完整示例。

          http://bootdey.com/snippets/view/page-loader

          【讨论】：

            【解决方案5】：

            很简单。

            HTML

            <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>

            CSS

            #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;
}

            JS - JQuery

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

            【讨论】：

              【解决方案6】：

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

              我想开发一个强大的插件，通过一个简单的 jQuery 调用我可以显示加载屏幕并在任务完成时将其删除。

              下面是代码。这取决于 Font Awesome 和 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));

              只需将以上内容放在一个 js 文件中，并将其包含在整个项目中即可。

              CSS添加：

              #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();

              【讨论】：

                【解决方案7】：

                请注意，当使用 ASP.Net MVC 和 using (Ajax.BeginForm(... 时，设置 ajaxStart 将不起作用。

                使用AjaxOptions 来解决这个问题：

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

                【讨论】：

                【解决方案8】：

                我使用 CSS3 制作动画

                /************ CSS3 *************/
.icon-spin {
  font-size: 1.5em;
  display: inline-block;
  animation: spin1 2s infinite linear;
}

@keyframes spin1{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(359deg)}
}

/************** CSS3 cross-platform ******************/

.icon-spin-cross-platform {
  font-size: 1.5em;
  display: inline-block;
  -moz-animation: spin 2s infinite linear;
  -o-animation: spin 2s infinite linear;
  -webkit-animation: spin 2s infinite linear;
  animation: spin2 2s infinite linear;
}

@keyframes spin2{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(359deg)}
}
@-moz-keyframes spin2{
    0%{-moz-transform:rotate(0deg)}
    100%{-moz-transform:rotate(359deg)}
}
@-webkit-keyframes spin2{
    0%{-webkit-transform:rotate(0deg)}
    100%{-webkit-transform:rotate(359deg)}
}
@-o-keyframes spin2{
    0%{-o-transform:rotate(0deg)}
    100%{-o-transform:rotate(359deg)}
}
@-ms-keyframes spin2{
    0%{-ms-transform:rotate(0deg)}
    100%{-ms-transform:rotate(359deg)}
}
                <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<div class="row">
  <div class="col-md-6">
    Default CSS3
    <span class="glyphicon glyphicon-repeat icon-spin"></span>
  </div>
  <div class="col-md-6">
    Cross-Platform CSS3
    <span class="glyphicon glyphicon-repeat icon-spin-cross-platform"></span>
  </div>
</div>

                【讨论】：

                  【解决方案9】：

                  根据https://www.w3schools.com/howto/howto_css_loader.asp，这是一个没有 JS 的两步过程：

                  1.将此 HTML 添加到您想要微调器的位置：&lt;div class="loader"&gt;&lt;/div&gt;

                  2.添加这个 CSS 来制作真正的微调器：

                  .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); }
}

                  【讨论】：

                  • 由于 OP 使用的是 jQuery，他们可以在发出长时间运行的请求以启动动画并在请求的回调函数中再次调用以将其隐藏之前调用 $("#loader").toggle();。
                  【解决方案10】：

                  您可以通过各种不同的方式来做到这一点。它可能是微妙的，例如页面上的“正在加载...”的小状态，或者在加载新数据时整个元素使页面变灰。我在下面采用的方法将向您展示如何完成这两种方法。

                  设置

                  让我们从http://ajaxload.info 获得一个漂亮的“加载”动画开始吧 我将使用

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

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

                  CSS

                  接下来让我们给它一些天赋：

                  /* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.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;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading .modal {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}

                  最后是 jQuery

                  好的，继续 jQuery。下一部分实际上非常简单：

                  $body = $("body");

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

                  就是这样！每当触发ajaxStart 或ajaxStop 事件时，我们都会将一些事件附加到body 元素。当一个 ajax 事件启动时，我们将“加载”类添加到正文中。当事件完成后，我们从主体中移除“加载”类。

                  查看实际操作：http://jsfiddle.net/VpDUG/4952/

                  【讨论】：

                  • 这是最深入的解决方案，尽管我建议您使用居中插件，将预加载器围绕页面元素（即 body、#element 或 .element )
                  • 那将是一个很好的补充，cballou。我只是想尽量减少信息 - 但正如你所指出的，它当然可以改进。
                  • 我不得不使用 .bind() 而不是 .on() 因为我们使用的是 jQuery 1.5.1！
                  • 我建议使用插件插件，以确保它们都已插入。
                  • 注意： 从 jQuery 1.8 开始，.ajaxStop() 和 .ajaxStart() 方法只能附加到文档。 docs跨度>
                  【解决方案11】：

                  尊重其他帖子，这里有一个非常简单的解决方案，使用 CSS3 和 jQuery，无需使用任何其他外部资源或文件。

                  $('#submit').click(function(){
  $(this).addClass('button_loader').attr("value","");
  window.setTimeout(function(){
    $('#submit').removeClass('button_loader').attr("value","\u2713");
    $('#submit').prop('disabled', true);
  }, 3000);
});
                  #submit:focus{
  outline:none;
  outline-offset: none;
}

.button {
    display: inline-block;
    padding: 6px 12px;
    margin: 20px 8px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    background-image: none;
    border: 2px solid transparent;
    border-radius: 5px;
    color: #000;
    background-color: #b2b2b2;
    border-color: #969696;
}

.button_loader {
  background-color: transparent;
  border: 4px solid #f3f3f3;
  border-radius: 50%;
  border-top: 4px solid #969696;
  border-bottom: 4px solid #969696;
  width: 35px;
  height: 35px;
  -webkit-animation: spin 0.8s linear infinite;
  animation: spin 0.8s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  99% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  99% { transform: rotate(360deg); }
}
                  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="submit" class="button" type="submit" value="Submit" />

                  【讨论】：

                    【解决方案12】：

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

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

                    【讨论】：

                    【解决方案13】：

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

                    ajaxStart 事件发生

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

                    ...这是兄弟，ajaxStop 事件

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

                    当页面上任何地方发生任何 ajax 活动时，它们共同构成了一种显示进度消息的好方法。

                    HTML：

                    <div id="loading">
  <p><img src="loading.gif" /> Please Wait</p>
</div>

                    脚本：

                    $(document).ajaxStart(function(){
    $('#loading').show();
 }).ajaxStop(function(){
    $('#loading').hide();
 });

                    【讨论】：

                    • 这是过时的，从 1.8.0 开始，.ajaxStart 只能附加到文档中，即。 $(document).ajaxStart(function(){}).
                    • @Jonno_FTW 已修复。塔。乔纳森·桑普森 (Jonathan Sampson) 对其问题的编辑取代了旧的问题和答案，但无论如何都要保持最新
                    • 乔纳森的回答非常深入，但对我来说这是最好的，因为它很简单。
                    【解决方案14】：

                    就像 Mark H 说的那样，blockUI 就是一种方式。

                    例如：

                    <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>

                    Obs.：我在 http://www.ajaxload.info/ 上获得了 ajax-loader.gif

                    【讨论】：

                    【解决方案15】：

                    如果您使用的是带有 Rails 的 Turbolinks，这是我的解决方案：

                    这是 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;
}

                    【讨论】：

                      【解决方案16】：

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

                      【讨论】：

                      • 已编辑，因为多个 'background-' 行不起作用，但单个背景语句可以正常工作。
                      【解决方案17】：

                      您可以从Ajaxload 获取旋转圆圈的动画 GIF - 将其粘贴在您的网站文件层次结构中的某个位置。然后，您只需要使用正确的代码添加一个 HTML 元素，并在完成后将其删除。这很简单：

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

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

                      然后您只需在 AJAX 调用中使用这些方法：

                      $.load(
     'http://example.com/myurl',
     { 'random': 'data': 1: 2, 'dwarfs': 7},
     function (responseText, textStatus, XMLHttpRequest) {
         hideLoadingImage();
     }
);

// this will be run immediately after the AJAX call has been made,
// not when it completes.
showLoadingImage();

                      这有一些注意事项：首先，如果您有两个或多个可以显示加载图像的位置，您将需要以某种方式跟踪一次运行的调用数量，并且仅在何时隐藏他们都完成了。这可以使用一个简单的计数器来完成，该计数器几乎适用于所有情况。

                      其次，这只会在成功的 AJAX 调用时隐藏加载图像。要处理错误状态，您需要查看$.ajax，它比$.load、$.get 等更复杂，但也更灵活。

                      【讨论】：

                      • 感谢您的回复。但是告诉我，为什么我需要使用 AJAX？我不能简单地在页面本身中追踪它吗？
                      • 您到底想跟踪什么？除非您在页面加载后请求信息（而 AJAX 几乎是不使用插件的唯一方法），否则为什么需要“加载”图像？
                      • Samir Talwar：实际上是一个繁重的 JavaScript 应用程序。谢谢，我明白了。
                      • 可以理解。在这种情况下，只需在开始之前致电showLoadingImage，在完成之后致电hideLoadingImage。应该相当简单。您可能需要坚持某种setTimeout 调用，以确保浏览器实际上呈现新的&lt;img&gt; 标记 - 我已经看到了几个案例，在 JavaScript 完成执行之前它不会打扰。
                      【解决方案18】：

                      jQuery 为 AJAX 请求何时开始和结束提供事件挂钩。您可以连接到这些以显示您的加载程序。

                      例如，创建以下 div：

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

                      在您的样式表中将其设置为display: none。你可以随心所欲地设计它。如果您愿意，可以在Ajaxload.info 生成漂亮的加载图像。

                      然后，您可以使用类似以下的方式使其在发送 Ajax 请求时自动显示：

                      $(document).ready(function () {

    $('#spinner').bind("ajaxSend", function() {
        $(this).show();
    }).bind("ajaxComplete", function() {
        $(this).hide();
    });

});

                      只需将此 Javascript 块添加到页面末尾之前关闭您的正文标记或您认为合适的任何地方。

                      现在，每当您发送 Ajax 请求时，都会显示 #spinner div。请求完成后会再次隐藏。

                      【讨论】：

                      • 有人能解释一下 AJAX 与此有什么关系吗？我不能在不使用 AJAX 访问服务器的情况下简单地在页面内管理这一切......还是我在这里遗漏了什么？谢谢。
                      • 啊 - 据我了解，您希望在发出 AJAX 请求时显示加载图像。如果您只是想在页面完全加载之前显示“请稍候，正在加载...”动画，您可以在页面中有一个加载 div，然后将其隐藏在 $(document).ready 块中。跨度>
                      【解决方案19】：

                      就实际加载图片而言，check out this site 有很多选项。

                      至于在请求开始时显示带有此图像的 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;
});

                      【讨论】：

                      • 注意事项：如果您无法修改 HTML 以添加加载 img 元素，您可以使用 CSS 将其作为背景图像添加到按钮上，例如input.loading-gif{background:url('images/loading.gif');} 然后使用 jQuery 应用该类，例如$('#mybutton').addClass('loading-gif');唯一的问题是这只会在单击提交按钮时请求 gif，这通常为时已晚，因此您需要预先缓存它，这对于 jQuery 来说很容易，例如(new Image()).src = "images/loading.gif";
                      • 这个网站有一个更大的，我认为更好的加载器选择，更多的自定义选项preloaders.net
                      • 仅供参考：从stackoverflow.com/questions/750358/…合并
                      • 不错的解决方案，但是当我打电话给show() after hide() it's not working 时。我找到了一个解决方案，将 show() 和 hide() 切换到 toggle()。希望它可以帮助遇到和我一样问题的人。另外，我尝试了解决方案 C) 并创建了 beforeSend 不能异步工作。所以，我建议在 $.ajax 上面调用 show() 才能正常工作。
                      • 非常感谢@Paolo。就个人而言，我喜欢你的答案，而不是大多数用户接受的答案。因此，从我这边 +1 给你。
                      猜你喜欢
                      • 1970-01-01
                      • 1970-01-01
                      • 2010-11-08
                      • 2021-06-21
                      • 1970-01-01
                      • 2015-01-17
                      • 1970-01-01
                      相关资源
                      最近更新 更多
                      热门标签
                      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode