我想在我的网站上放置一个“请等待,正在加载”旋转的圆圈动画。我应该如何使用jQuery来实现这一点?
当前回答
根据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); }
}
其他回答
SVG动画可能是这个问题的更好解决方案。你不需要担心写CSS和相比gif,你会得到更好的分辨率和alpha透明度。可以使用的一些非常好的SVG加载动画在这里:http://samherbert.net/svg-loaders/
你也可以通过我创建的服务https://svgbox.net/iconset/loaders直接使用这些动画。它允许您自定义填充和直接使用(盗链)是允许的。
要用jQuery完成你想做的事情,你可能应该隐藏一个加载信息元素,并在你想显示加载器时使用.show()。例如,这段代码显示了一秒钟后的加载器:
setTimeout(函数(){ $(" #负载”),告诉(); }, 1000) < script src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js " > < /脚本> <div id="load" style="display:none"> 请稍等… < img src = " / / s.svgbox.net/loaders.svg ?填补= maroon&ic =困境” 风格= " 24像素宽度:" > < / div >
至于实际加载的图像,请查看这个网站的一堆选项。
至于在请求开始时显示带有此图像的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;
});
根据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); }
}
乔纳森出色的解决方案在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)};
你可以用不同的方法来做。它可以是页面上的一个小状态,写着“正在加载…”,或者是在加载新数据时,整个元素使页面变灰。下面的方法将向您展示如何实现这两种方法。
设置
让我们从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/
推荐文章
- 可以在setInterval()内部调用clearInterval()吗?
- 无法读取未定义的属性“msie”- jQuery工具
- jQuery:执行同步AJAX请求
- jQuery表格排序
- 如何禁用文本选择使用jQuery?
- 如何停止事件冒泡复选框点击
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何删除和清除所有的本地存储数据
- 如何修改标签文本?
- 如何获得十六进制颜色值而不是RGB值?
- 如何将一个标题转换为jQuery的URL段塞?
- $(window).width()与媒体查询不一样
- AJAX请求中的内容类型和数据类型是什么?
- 如何打破_。在underscore.js中的每个函数
- 如何在jQuery中获得当前日期?