我想在我的网站上放置一个“请等待,正在加载”旋转的圆圈动画。我应该如何使用jQuery来实现这一点?
当前回答
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();
});
});
只需在关闭body标签或任何您认为合适的地方之前,将此Javascript块添加到页面的末尾。
现在,无论何时发送Ajax请求,都会显示#spinner div。当请求完成时,它将再次被隐藏。
其他回答
你可以用不同的方法来做。它可以是页面上的一个小状态,写着“正在加载…”,或者是在加载新数据时,整个元素使页面变灰。下面的方法将向您展示如何实现这两种方法。
设置
让我们从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/
我使用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>
将此代码放在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
乔纳森出色的解决方案在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)};
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();
});
推荐文章
- 可以在setInterval()内部调用clearInterval()吗?
- 无法读取未定义的属性“msie”- jQuery工具
- jQuery:执行同步AJAX请求
- jQuery表格排序
- 如何禁用文本选择使用jQuery?
- 如何停止事件冒泡复选框点击
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何删除和清除所有的本地存储数据
- 如何修改标签文本?
- 如何获得十六进制颜色值而不是RGB值?
- 如何将一个标题转换为jQuery的URL段塞?
- $(window).width()与媒体查询不一样
- AJAX请求中的内容类型和数据类型是什么?
- 如何打破_。在underscore.js中的每个函数
- 如何在jQuery中获得当前日期?