我想在我的网站上放置一个“请等待，正在加载”旋转的圆圈动画。我应该如何使用jQuery来实现这一点?
当前回答
至于实际加载的图像，请查看这个网站的一堆选项。
至于在请求开始时显示带有此图像的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;
});
其他回答
我还发现了这样一个问题(挑战)，在DB响应期间通知用户一些“信息”。
我的解决方案可能与这里的略有不同，它是好还是坏?我不知道，这对我来说已经足够了。
$.ajax({
type: 'ajax',
method: 'post',
url: '<?php echo base_url()?>skargi/osluga_skarg',
data: { full_date: full_date, head_title: head_title },
//async: false,
dataType: 'json',
beforeSend: function() { $body.addClass("loading"); },
success: function(data) {
$body.removeClass("loading");
你可以用不同的方法来做。它可以是页面上的一个小状态，写着“正在加载…”，或者是在加载新数据时，整个元素使页面变灰。下面的方法将向您展示如何实现这两种方法。
设置
让我们从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/
根据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); }
}
这很简单。
HTML
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div id="cover"> <span class="glyphicon glyphicon-refresh w3-spin preloader-Icon"></span>Please Wait, Loading…</div>
<h1>Dom Loaded</h1>
</body>
CSS
#cover {
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: #141526;
z-index: 9999;
font-size: 65px;
text-align: center;
padding-top: 200px;
color: #fff;
font-family:tahoma;
}
JS - JQuery
$(window).on('load', function () {
$("#cover").fadeOut(1750);
});
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 >
推荐文章
- 它是可能的动画scrollTop与jQuery?
- 我需要哪个选择器来选择一个文本选项?
- 如何添加ID属性Html.BeginForm()在asp.net mvc?
- 如何获得<html>标签html与JavaScript / jQuery?
- 如何禁用ts规则为特定的行?
- 检测浏览器自动填充
- jQuery的小写和大写
- 遍历<select>选项
- jQuery滚动到页面底部/iframe
- 使用jQuery选择前“n”项
- 在ASP中使用jQuery渲染局部视图。NET MVC
- Jquery如果div id有子
- 如何使用jQuery获取一个表单元格值?
- 如何使用jQuery去一个URL ?
- Jquery禁用表单提交进入
