我想在我的网站上放置一个“请等待,正在加载”旋转的圆圈动画。我应该如何使用jQuery来实现这一点?
当前回答
将此代码放在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
其他回答
将此代码放在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
除了Jonathan和Samir的建议(顺便说一下,这两个答案都很棒!),jQuery还内置了一些事件,当你发出ajax请求时,它会为你触发这些事件。
这是ajaxStart事件
每当AJAX请求开始时(并且没有一个是活动的)显示加载消息。
...它的兄弟,ajaxStop事件
附加一个函数,以便在所有AJAX请求结束时执行。这是一个Ajax事件。
当任何ajax活动在页面的任何地方发生时,它们共同构成了显示进度消息的好方法。
HTML:
<div id="loading">
<p><img src="loading.gif" /> Please Wait</p>
</div>
脚本:
$(document).ajaxStart(function(){
$('#loading').show();
}).ajaxStop(function(){
$('#loading').hide();
});
根据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 >
我还发现了这样一个问题(挑战),在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");
推荐文章
- 可以在setInterval()内部调用clearInterval()吗?
- 无法读取未定义的属性“msie”- jQuery工具
- jQuery:执行同步AJAX请求
- jQuery表格排序
- 如何禁用文本选择使用jQuery?
- 如何停止事件冒泡复选框点击
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何删除和清除所有的本地存储数据
- 如何修改标签文本?
- 如何获得十六进制颜色值而不是RGB值?
- 如何将一个标题转换为jQuery的URL段塞?
- $(window).width()与媒体查询不一样
- AJAX请求中的内容类型和数据类型是什么?
- 如何打破_。在underscore.js中的每个函数
- 如何在jQuery中获得当前日期?