我想在我的网站上放置一个"请等待,加载"旋转圆圈动画.我应该如何使用jQuery实现这一目标？
你可以用不同的方式做到这一点.它可能是一个微妙的页面上的小状态,表示"正在加载...",或者在加载新数据时整个元素变灰的情况下变得很大.我将在下面介绍的方法将向您展示如何完成这两种方法.
让我们从http://ajaxload.info获取一个很好的"加载"动画,
我将使用它
让我们创建一个可以在我们发出ajax请求的任何时候显示/隐藏的元素:
接下来让我们给它一些天赋:
/* 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.下一部分实际上非常简单:
$body = $("body");
$(document).on({
ajaxStart: function() { $body.addClass("loading"); },
ajaxStop: function() { $body.removeClass("loading"); }
});
而已!我们会在触发事件ajaxStart或ajaxStop事件时将一些事件附加到body元素.当ajax事件开始时,我们将"加载"类添加到正文中.当事件完成后,我们从正文中删除"加载"类.
看到它在行动:http://jsfiddle.net/VpDUG/4952/
至于实际加载图像,请查看此站点以获取一系列选项.
至于在请求开始时使用此图像显示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;
});
除了Jonathan和Samir建议的内容(这两个都是优秀的答案!),jQuery有一些内置的事件,它们在发出ajax请求时会为你解雇.
这是ajaxStart事件
每当AJAX请求启动时显示加载消息(并且没有任何活动已经激活).
......这是兄弟,ajaxStop事件
在所有AJAX请求结束时附加要执行的函数.这是一个Ajax事件.
当页面上的任何地方发生任何ajax活动时,它们一起制作一个很好的方式来显示进度消息.
HTML:
Please Wait
脚本:
$(document).ajaxStart(function(){
$('#loading').show();
}).ajaxStop(function(){
$('#loading').hide();
});
你可以从Ajaxload中获取一个旋转圆圈的动画GIF - 粘贴在你网站文件中的某个地方.然后,您只需要添加一个包含正确代码的HTML元素,并在完成后将其删除.这很简单:
function showLoadingImage() {
$('#yourParentElement').append('
');
}
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等等,但也要灵活得多.
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)};
jQuery为AJAX请求的开始和结束提供事件挂钩.你可以挂钩来展示你的装载机.
例如,创建以下div:
将其设置为display: none样式表.您可以按照自己想要的方式设置样式.如果您愿意,可以在Ajaxload.info上生成一个很好的加载映像.
然后,您可以使用以下内容使其在发送Ajax请求时自动显示:
$(document).ready(function () {
$('#spinner').bind("ajaxSend", function() {
$(this).show();
}).bind("ajaxComplete", function() {
$(this).hide();
});
});
只需将此Javascript块添加到页面末尾,然后再关闭正文标记或您认为合适的位置.
现在,无论何时发送Ajax请求,#spinner都会显示div.请求完成后,它将再次被隐藏.
如果您使用Turbolinks With Rails,这是我的解决方案:
这是CoffeeScript
$(window).on 'page:fetch', ->
$('body').append("")
$('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所说的那样,blockUI就是这样.
例:
视频:我在http://www.ajaxload.info/上获得了ajax-loader.gif
尽管对其他帖子充满敬意,但您可以使用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); }
}
京公网安备 11010802040832号 | 京ICP备19059560号-6 