如何创建“请稍候，正在加载中”;动画使用jQuery?

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

1211127 次浏览
小开

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

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

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

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

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

小开
最佳答案

你可以用不同的方法来做。它可以是页面上的一个小状态，写着“正在加载…”，或者是在加载新数据时，整个元素使页面变灰。下面的方法将向您展示如何实现这两种方法。

设置

让我们从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事件开始时，我们将“loading”类添加到主体中。当事件完成时，我们从主体中删除“loading”类。

看到它的行动:http://jsfiddle.net/VpDUG/4952/

小开

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块添加到页面末尾之前，关闭body标签或任何您认为合适的地方。

现在，无论何时发送Ajax请求，都将显示#spinner div。当请求完成时，它将再次被隐藏。

小开

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

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

使用AjaxOptions来解决这个问题:

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

乔纳森出色的解决方案在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)};
小开

如果你正在使用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;
}
小开

就像Mark H说的block kui就是方法。

例:

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

奥林匹克广播服务公司。:我在http://www.ajaxload.info/上得到了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>

在这里查看完整的示例。

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

小开

我所见过的大多数解决方案都希望我们设计一个加载覆盖，保持隐藏，然后在需要时取消隐藏，或者显示gif或图像等。

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

下面是代码。它取决于字体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();
小开

出于对其他文章的尊重，这里有一个非常简单的解决方案，使用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" />

小开

我使用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>

小开

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

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

这很简单。

超文本标记语言

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

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>

小开

我也发现了这样一个问题(挑战)，通知用户一些“信息”;在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");
小开

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();
});
小开

超文本标记语言

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<button type="button" id="btn-submit" class="btn btn-info">Submit</button>


<div class="modal fade" id="loadingModal" tabindex="-1" role="dialog" aria-labelledby="loader" aria-hidden="true" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog" style="width:50px;padding-top: 15%;">
<div class="modal-content text-center">
<img src="https://i.gifer.com/ZZ5H.gif" />
</div>
</div>
</div>

jQuery

$(function() {
$('#btn-submit').click(function() {
$('#loadingModal').modal('show');
});
});

提交答案