我想在我的网站上放置一个“请等待,正在加载”旋转的圆圈动画。我应该如何使用jQuery来实现这一点?
当前回答
除了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();
});
其他回答
出于对其他文章的尊重,这里有一个非常简单的解决方案,使用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" />
我所见过的大多数解决方案都希望我们设计一个加载覆盖,保持隐藏,然后在需要时取消隐藏,或者显示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();
如果你正在使用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;
}
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();
});
你可以用不同的方法来做。它可以是页面上的一个小状态,写着“正在加载…”,或者是在加载新数据时,整个元素使页面变灰。下面的方法将向您展示如何实现这两种方法。
设置
让我们从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事件开始时,我们将“loading”类添加到主体中。当事件完成时,我们从主体中删除“loading”类。
看到它的行动:http://jsfiddle.net/VpDUG/4952/
推荐文章
- NSLayoutConstraints是可动画的吗?
- 如何在另一个元素之后添加一个元素?
- src和dist文件夹的作用是什么?
- jQuery。由于转义了JSON中的单引号,parseJSON抛出“无效JSON”错误
- 如何使用jQuery检测页面的滚动位置
- 如何在JSON中使用杰克逊更改字段名
- 在JavaScript中根据键值查找和删除数组中的对象
- 防止在ASP中缓存。NET MVC中使用属性的特定操作
- jQuery: keyPress退格键不火?
- XMLHttpRequest Origin null不允许Access-Control-Allow-Origin for file:/// to file:///(无服务器)
- 重置setTimeout
- jQuery有不聚焦的方法吗?
- jQuery -替换字符串中某个字符的所有实例
- Ng-repeat结束事件
- 模糊vs聚焦-有什么真正的区别吗?