Question

我想在我的网站上放置一个“请等待，加载”旋转圆圈动画。我应该如何使用jQuery实现这一目标？

Answer 1

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

设置

让我们从http://ajaxload.info给我们一个很好的“加载”动画开始吧我将使用 enter image description here

让我们创建一个可以在我们发出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/

Answer 2

就实际加载图像而言，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;
});

Answer 3

除了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();
 });

Answer 4

你可以从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等更复杂，但也更灵活。

Answer 5

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

Answer 6

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。请求完成后，它将再次被隐藏。

Answer 7

如果您使用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;
}

Answer 8

对其他帖子充分尊重，你有一个非常简单的解决方案，使用CSS3和jQuery，而不使用任何其他外部资源和文件。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 9

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

Answer 10

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

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

Answer 11

我见过的大多数解决方案都要求我们设计加载叠加层，将其隐藏起来，然后在需要时取消隐藏，或者显示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文件中并将其包含在整个项目中。

调用：

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

Answer 12

请注意，使用ASP.Net MVC时，使用using (Ajax.BeginForm(...，设置ajaxStart将无效。

使用AjaxOptions来解决此问题：

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

Answer 13

我使用CSS3进行动画

＆＃13;

/************ 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)}
}

＆＃13;

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

＆＃13;

Answer 14

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

1.在您想要微调器的位置添加此HTML：<div class="loader"></div>

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

Answer 15

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

您也可以直接通过我建立的服务使用这些动画：https://svgbox.net/icon-set/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>

Answer 16

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

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

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

Answer 17

这很简单。

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

如何使用jQuery创建“Please Wait，Loading ...”动画？

17 个答案:

设置

CSS

最后，jQuery