#1 楼
您可以通过各种不同的方式进行操作。在页面上显示“正在加载...”的小状态可能是微妙的,或者在加载新数据时整个页面变灰会使整个页面变灰。我在下面采用的方法将向您展示如何完成这两种方法。安装程序
让我们从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”类添加到正文中。并且在事件完成后,我们将从主体中删除“正在加载”类。#2 楼
至于实际的加载图像,请访问此站点以获取大量选项。就在请求开始时显示带有该图像的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;
});
评论
注意事项:如果您无法修改HTML以添加正在加载的img元素,则可以使用CSS将其作为按钮上的背景图片进行处理,例如input.loading-gif {background:url('images / loading.gif');},然后使用jQuery应用该类,例如$('#mybutton')。addClass('loading-gif');唯一的问题是,仅在单击提交按钮时才会请求gif,这通常为时已晚,因此您需要对其进行预缓存,这在jQuery中很容易。 (new Image())。src =“ images / loading.gif”;
– jackocnr
2011-2-23在16:27
该站点具有更多装载机,我认为装载机选择更好,具有更多自定义选项preloaders.net
–rorypicko
2013年12月22日19:35
仅供参考:从stackoverflow.com/questions/750358/…合并
–Shog9
14年7月25日在19:55
好的解决方案,但是当我在hide()之后调用show()时,它不起作用。我找到了一个将show()和hide()切换到toggle()的解决方案。希望它可以帮助某人遇到与我相同的问题。另外,我尝试了解决方案C),并创建了beforeSend无法异步工作。因此,我建议在$ .ajax上方调用show()以使其正常工作。
–刘镇玱
19年8月16日在5:54
非常感谢@Paolo。就个人而言,我喜欢您的答案,而不是大多数用户接受的答案。因此,从我这边向您+1。
– Ashok kumar
4月23日11:59
#3 楼
连同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();
});
评论
从1.8.0开始,这已经过时,.ajaxStart只能附加到文档,即。 $(document).ajaxStart(function(){})。
–Jonno_FTW
2014年4月14日在3:10
@Jonno_FTW已修复。助教。乔纳森·桑普森(Jonathan Sampson)对他的问题的修改已取代了旧的问题和答案,但无论如何仍要保持最新
– Dan F
2014年4月15日在22:06
乔纳森(Jonathan)的回答非常恰当,但这对我来说是最简单的方法。
– Ojonugwa Jude Ochalifu
2014年5月13日在8:01
#4 楼
您可以从Ajaxload抓取一个旋转圆圈的GIF动画-将其粘贴在网站文件层次结构中的某个位置。然后,您只需要添加带有正确代码的HTML元素,并在完成后将其删除即可。这很简单:function showLoadingImage() {
$('#yourParentElement').append('<div id="loading-image"><img src="path/to/loading.gif" alt="Loading..." /></div>');
}
function hideLoadingImage() {
$('#loading-image').remove();
}
然后您只需要在AJAX调用中使用以下方法:
$.load(
'http://example.com/myurl',
{ 'random': 'data': 1: 2, 'dwarfs': 7},
function (responseText, textStatus, XMLHttpRequest) {
hideLoadingImage();
}
);
// this will be run immediately after the AJAX call has been made,
// not when it completes.
showLoadingImage();
这有一些警告:首先,如果您有两个或多个位置可以显示正在加载的图像,则需要跟踪一下一次正在运行多少个呼叫,并且仅在它们出现时隐藏完成了。这可以使用一个简单的计数器来完成,该计数器几乎可以在所有情况下工作。
其次,这只会在成功的AJAX调用中隐藏加载图像。要处理错误状态,您需要查看
$.ajax
,它比$.load
,$.get
之类的要复杂,但也要灵活得多。评论
谢谢回复。但是告诉我,为什么我完全需要使用AJAX?我不能简单地在页面本身中查找全部内容吗?
–thedp
09-12-27 at 23:18
您到底要跟踪什么?除非您在页面加载后请求信息(而AJAX几乎是不使用插件的唯一方式),那么为什么根本需要“加载”图像?
– Samir Talwar
09-12-28 at 2:39
Samir Talwar:实际上是一个沉重的JavaScript应用程序。谢谢,我明白了。
–thedp
09年12月28日在6:09
可以理解的在这种情况下,只需在开始之前调用showLoadingImage,然后在完成之后调用hideLoadingImage。应该相当简单。您可能需要插入某种setTimeout调用,以确保浏览器实际上呈现了新的标记-我已经看到了几种情况,直到JavaScript完成执行后,它才变得麻烦。
– Samir Talwar
09年12月28日在15:38
#5 楼
Jonathon的出色解决方案在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)};
评论
进行了修改,因为多条“ background-”行不起作用,但单个background语句正常运行。
–莫里斯·弗拉纳根(Maurice Flanagan)
2012年9月9日14:03在
#6 楼
jQuery为AJAX请求何时开始和结束提供了事件挂钩。您可以将其插入以显示您的加载器。例如,创建以下div:<div id="spinner">
<img src="images/spinner.gif" alt="Loading" />
</div>
在样式表中将其设置为
display: none
。您可以按照自己的方式设置样式。如果愿意,可以在Ajaxload.info上生成一个不错的加载图像。 br /> $(document).ready(function () {
$('#spinner').bind("ajaxSend", function() {
$(this).show();
}).bind("ajaxComplete", function() {
$(this).hide();
});
});
在关闭body标记或您认为合适的任何位置之前,只需将此Javascript块添加到页面末尾。
现在,无论何时发送Ajax请求,将显示
#spinner
div。请求完成后,它将再次被隐藏。评论
有人可以解释一下AJAX与此有关吗?我不能在不使用AJAX访问服务器的情况下简单地管理页面中的所有内容吗?还是我在这里缺少什么?谢谢。
–thedp
09年12月27日23:24
嗯-据我了解,您希望在进行AJAX请求时显示加载图像。如果只希望显示“请稍等,正在加载...”动画,直到页面完全加载完毕,则可以在页面中具有加载div,然后将其隐藏在$(document).ready块中。
– Veeti
09年12月27日在23:33
#7 楼
如果您使用带有Rails的Turbolinks,这是我的解决方案:这是CoffeeScript
$(window).on 'page:fetch', ->
$('body').append("<div class='modal'></div>")
$('body').addClass("loading")
$(window).on 'page:change', ->
$('body').removeClass("loading")
这是基于第一个的SASS CSS乔纳森·桑普森(Jonathan Sampson)的出色回答
# loader.css.scss
.modal {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, 0.4)
asset-url('ajax-loader.gif', image)
50% 50%
no-repeat;
}
body.loading {
overflow: hidden;
}
body.loading .modal {
display: block;
}
#8 楼
就像Mark H所说的那样,blockUI就是这种方式。示例:
<script type="text/javascript" src="javascript/jquery/jquery.blockUI.js"></script>
<script>
// unblock when ajax activity stops
$(document).ajaxStop($.unblockUI);
$("#downloadButton").click(function() {
$("#dialog").dialog({
width:"390px",
modal:true,
buttons: {
"OK, AGUARDO O E-MAIL!": function() {
$.blockUI({ message: '<img src="img/ajax-loader.gif" />' });
send();
}
}
});
});
function send() {
$.ajax({
url: "download-enviar.do",
type: "POST",
blablabla
});
}
</script>
不好意思:我在上面安装了ajax-loader.gif http://www.ajaxload.info/
评论
仅供参考:从stackoverflow.com/questions/750358/…合并
–Shog9
14年7月25日在19:55
#9 楼
在充分考虑其他帖子的情况下,您在这里有一个非常简单的解决方案,使用CSS3和jQuery,无需使用任何其他外部资源或文件。 $('#submit').click(function(){
$(this).addClass('button_loader').attr("value","");
window.setTimeout(function(){
$('#submit').removeClass('button_loader').attr("value","\u2713");
$('#submit').prop('disabled', true);
}, 3000);
});
#submit:focus{
outline:none;
outline-offset: none;
}
.button {
display: inline-block;
padding: 6px 12px;
margin: 20px 8px;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
background-image: none;
border: 2px solid transparent;
border-radius: 5px;
color: #000;
background-color: #b2b2b2;
border-color: #969696;
}
.button_loader {
background-color: transparent;
border: 4px solid #f3f3f3;
border-radius: 50%;
border-top: 4px solid #969696;
border-bottom: 4px solid #969696;
width: 35px;
height: 35px;
-webkit-animation: spin 0.8s linear infinite;
animation: spin 0.8s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
99% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
99% { transform: rotate(360deg); }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="submit" class="button" type="submit" value="Submit" />
#10 楼
这将使按钮消失,然后在其位置出现“正在加载”的动画,并最终仅显示成功消息。$(function(){
$('#submit').click(function(){
$('#submit').hide();
$("#form .buttons").append('<img src="assets/img/loading.gif" alt="Loading..." id="loading" />');
$.post("sendmail.php",
{emailFrom: nameVal, subject: subjectVal, message: messageVal},
function(data){
jQuery("#form").slideUp("normal", function() {
$("#form").before('<h1>Success</h1><p>Your email was sent.</p>');
});
}
);
});
});
评论
仅供参考:从stackoverflow.com/questions/750358/…合并
–Shog9
14年7月25日在19:55
#11 楼
我见过的大多数解决方案都希望我们设计一个加载叠加层,将其隐藏起来,然后在需要时取消隐藏,或者显示gif或图像等。我想开发一个强大的插件,通过简单的jQuery调用,我可以显示加载屏幕,并在任务完成时将其拆解。
下面是代码。它取决于Font 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();
#12 楼
请注意,在将ASP.Net MVC与using (Ajax.BeginForm(...
一起使用时,无法设置ajaxStart
。使用
AjaxOptions
可以解决此问题:(Ajax.BeginForm("ActionName", new AjaxOptions { OnBegin = "uiOfProccessingAjaxAction", OnComplete = "uiOfProccessingAjaxActionComplete" }))
评论
仅供参考:从stackoverflow.com/questions/750358/…合并
–Shog9
14年7月25日在19:55
#13 楼
根据https://www.w3schools.com/howto/howto_css_loader.asp,这是一个不包含JS的两步过程: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); }
}
评论
由于OP使用的是jQuery,因此他们可以调用$(“#loader”)。toggle();。在发出长时间运行的请求以启动动画之前,然后在请求的回调函数中再次调用以将其隐藏。
– Dmitri Chubarov
18年4月13日在7:51
#14 楼
我将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>
#15 楼
SVG动画可能是解决此问题的更好方法。您无需担心编写CSS,并且与GIF相比,您将获得更好的分辨率和Alpha透明度。您可以在此处使用一些非常好的SVG加载动画:http://samherbert.net/svg-loaders/您也可以直接通过我建立的服务使用这些动画:https://svgbox.net/图标集/加载程序。它允许您自定义填充,并且可以直接使用(热链接)。
要完成您想用jQuery进行的操作,您可能应该隐藏一个加载信息元素,并在要显示加载程序时使用
.show()
。例如,此代码在一秒钟后显示了加载程序: setTimeout(function() {
$("#load").show();
}, 1000)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div id="load" style="display:none">
Please wait...
<img src="//s.svgbox.net/loaders.svg?fill=maroon&ic=tail-spin"
style="width:24px">
</div>
#16 楼
将此代码放在您的身体标签上<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
#17 楼
非常简单。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;
}
$(window).on('load', function () {
$("#cover").fadeOut(1750);
});
评论
这是最深入的解决方案,尽管我建议您使用居中插件将预加载器居中于页面元素(即body,#element或.element)的中心
– Corey Ballou
09年12月27日在1:46
卡鲍,那将是一个不错的补充。我只是试图使信息最小化,但是正如您所指出的那样,可以肯定地加以改进。
–桑普森
09年12月27日在2:02
当我们使用jQuery 1.5.1时,我不得不使用.bind()而不是.on()!
–renegadeMind
2012年7月10日15:09
我建议使用插件的插件,以确保它们都已插入。
– contactmatt
2012年9月12日在21:25
注意:从jQuery 1.8开始,.ajaxStop()和.ajaxStart()方法仅应附加到文档。 docs
– Balexandre
13年11月21日在8:42