我想在我的网站上放置一个“请等待，正在加载”旋转的圆圈动画。我应该如何使用jQuery来实现这一点?
当前回答
我所见过的大多数解决方案都希望我们设计一个加载覆盖，保持隐藏，然后在需要时取消隐藏，或者显示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();
其他回答
至于实际加载的图像，请查看这个网站的一堆选项。
至于在请求开始时显示带有此图像的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;
});
我使用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>
乔纳森出色的解决方案在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)};
我所见过的大多数解决方案都希望我们设计一个加载覆盖，保持隐藏，然后在需要时取消隐藏，或者显示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();
将此代码放在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
推荐文章
- 如何在JSON中使用杰克逊更改字段名
- 在JavaScript中根据键值查找和删除数组中的对象
- 防止在ASP中缓存。NET MVC中使用属性的特定操作
- jQuery: keyPress退格键不火?
- XMLHttpRequest Origin null不允许Access-Control-Allow-Origin for file:/// to file:///(无服务器)
- 重置setTimeout
- jQuery有不聚焦的方法吗?
- jQuery -替换字符串中某个字符的所有实例
- Ng-repeat结束事件
- 模糊vs聚焦-有什么真正的区别吗?
- 如何用jQuery / JavaScript解析JSON数据?
- jQuery在请求体中发布有效的json
- jQuery中的live()转换为on()
- jQuery等价于JavaScript的addEventListener方法
- jQuery需要避免的陷阱
