如何创建一个＆QUOT;请等候，正在下载...＆QUOT;动画使用jQuery？ [英] How can I create a "Please Wait, Loading..." animation using jQuery?

问题描述

我想放一个请稍等，装载旋转的圆圈动画在我的网站。我应该如何做到这一点使用jQuery？

I would like to place a "please wait, loading" spinning circle animation on my site. How should I accomplish this using jQuery?

推荐答案

您可以这样做各种不同的方式。这可能是一个微妙的页面上的一个小的状态说正在加载...，或大声变灰页面的新的数据加载时的整个元素。我采取以下的方法将告诉你如何实现这两种方法。

You could do this various different ways. It could be a subtle as a small status on the page saying "Loading...", or as loud as an entire element graying out the page while the new data is loading. The approach I'm taking below will show you how to accomplish both methods.

让我们把我们从 http://ajaxload.info 一个漂亮的加载动画的开始
我将使用

Let's start by getting us a nice "loading" animation from http://ajaxload.info I'll be using

让我们创建一个可以显示/隐藏任何时候，我们正在做一个Ajax请求的元素：

Let's create an element that we can show/hide anytime we're making an ajax request:

<div class="modal"><!-- Place at bottom of page --></div>

的CSS

接下来让我们给它一些天赋：

The CSS

Next let's give it some flair:

/* 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 {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}

最后，jQuery的

好吧，就到了jQuery。接下来的这个部分实际上是非常简单的：

And finally, the jQuery

Alright, on to the jQuery. This next part is actually really simple:

$body = $("body");

$(document).on({
    ajaxStart: function() { $body.addClass("loading");    },
     ajaxStop: function() { $body.removeClass("loading"); }    
});

这就是它！我们要附加一些事件的主体元素任何时候 ajaxStart 或 ajaxStop 事件被解雇。当一个Ajax事件开始，我们增加了加载类的身体。当事件完成后，我们清除体内的加载类。

That's it! We're attaching some events to the body element anytime the ajaxStart or ajaxStop events are fired. When an ajax event starts, we add the "loading" class to the body. and when events are done, we remove the "loading" class from the body.

看到它在行动： http://jsfiddle.net/VpDUG/4952/

这篇关于如何创建一个＆QUOT;请等候，正在下载...＆QUOT;动画使用jQuery？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！