我想在我的网站上放置一个“请等待,正在加载”旋转的圆圈动画。我应该如何使用jQuery来实现这一点?


当前回答

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 >

其他回答

乔纳森出色的解决方案在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)};

注意,当使用ASP。Net MVC,使用(Ajax.BeginForm(…,设置ajaxStart将不起作用。

使用AjaxOptions来解决这个问题:

(Ajax.BeginForm("ActionName", new AjaxOptions { OnBegin = "uiOfProccessingAjaxAction", OnComplete = "uiOfProccessingAjaxActionComplete" }))

fontaweesome有一个加载动画图标,可以直接在你的项目中使用,没有任何额外的数据负担,如果你已经在使用字体awesome。

<span id="loading" style="display:none"><i class="fa fa-spinner fa-pulse"></i> PLEASE WAIT </span>

然后是jquery,你可以使用下面的代码来显示隐藏元素。

$(document).ajaxSend(function() {
    $('#loading').show();
});

$(document).ajaxComplete(function() {  
    $('#loading').hide();
});

这很简单。

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);
});

除了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();
 });