JQuery kullanarak nasıl “Lütfen Bekleyin, Yükleniyor…” animasyonu oluşturabilirim?

Siteme "lütfen bekleyin, yükleniyor" dönen bir daire animasyonu yerleştirmek istiyorum. Bunu jQuery kullanarak nasıl başarmalıyım?

Bunu çeşitli şekillerde yapabilirsiniz. Sayfada "Yükleniyor ..." diyen küçük bir durum kadar ince olabilir veya yeni veriler yüklenirken sayfayı gölgeleyen tüm bir öğe kadar yüksek olabilir. Aşağıda uyguladığım yaklaşım, her iki yöntemi de nasıl gerçekleştireceğinizi gösterecektir.

Kurulum

En dan bize güzel "yükleme" animasyon alarak başlayalım http://ajaxload.info I kullanarak olacak

Bir ajax isteğinde bulunduğumuzda gösterebileceğimiz / gizleyebileceğimiz bir öğe oluşturalım:

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

CSS

Sonra biraz yetenek verelim:

/* 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;
}

Ve son olarak, jQuery

Tamam, jQuery'de. Bu sonraki bölüm aslında gerçekten basit:

$body = $("body");

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

Bu kadar! Biz her zaman vücut elemana bazı olayları takılarak ediyoruz ajaxStartveya ajaxStopolay harekete. Bir ajax olayı başladığında, gövdeye "loading" sınıfını ekleriz. ve olaylar tamamlandığında, "loading" sınıfını gövdeden kaldırıyoruz.

Uygulamaya bakın: http://jsfiddle.net/VpDUG/4952/

Gerçek yükleme görüntüsü kadar, bir dizi seçenek için bu siteye göz atın.

Bir istek başladığında bu görüntü ile bir DIV görüntülemek kadar, birkaç seçeneğiniz vardır:

A) Resmi manuel olarak gösterin ve gizleyin:

$('#form').submit(function() {
    $('#wait').show();
    $.post('/whatever.php', function() {
        $('#wait').hide();
    });
    return false;
});

B) ajaxStart ve ajaxComplete kullanın :

$('#wait').ajaxStart(function() {
    $(this).show();
}).ajaxComplete(function() {
    $(this).hide();
});

Bunu kullanarak öğe, herhangi bir istek için gösterilir / gizlenir . İhtiyaca bağlı olarak iyi veya kötü olabilir.

C) Belirli bir talep için ayrı ayrı geri aramalar kullanın:

$('#form').submit(function() {
    $.ajax({
        url: '/whatever.php',
        beforeSend: function() { $('#wait').show(); },
        complete: function() { $('#wait').hide(); }
    });
    return false;
});

Jonathan ve Samir'in önerdiği şeylerin yanı sıra (her ikisi de mükemmel cevaplar btw!), JQuery, bir ajax isteği yaparken sizin için tetikleyeceği bazı yerleşik olaylara sahiptir.

Orada ajaxStartolay

Bir AJAX isteği başladığında (ve hiçbiri etkin değilken) bir yükleme mesajı gösterin.

... ve bu kardeş, ajaxStopolay

Tüm AJAX istekleri sona erdiğinde yürütülecek bir işlev ekleyin. Bu bir Ajax Etkinliğidir.

Birlikte, sayfanın herhangi bir yerinde herhangi bir ajax etkinliği olduğunda bir ilerleme mesajı göstermenin iyi bir yolunu yaparlar.

HTML:

<div id="loading">
  <p><img src="loading.gif" /> Please Wait</p>
</div>

Senaryo:

$(document).ajaxStart(function(){
    $('#loading').show();
 }).ajaxStop(function(){
    $('#loading').hide();
 });

Ajaxload'dan dönen bir dairenin hareketli bir GIF'ini kapabilirsiniz - bunu web sitenizin heirarchy'sinde bir yere yapıştırın. Ardından, doğru kodla bir HTML öğesi eklemeniz ve işiniz bittiğinde onu kaldırmanız yeterlidir. Bu oldukça basit:

function showLoadingImage() {
    $('#yourParentElement').append('<div id="loading-image"><img src="path/to/loading.gif" alt="Loading..." /></div>');
}

function hideLoadingImage() {
    $('#loading-image').remove();
}

Daha sonra AJAX çağrınızda şu yöntemleri kullanmanız yeterlidir:

$.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();

Bunun birkaç uyarısı vardır: her şeyden önce, yükleme görüntüsünün gösterilebileceği iki veya daha fazla yeriniz varsa, bir kerede kaç aramanın çalıştığının kaydını tutmanız ve yalnızca hepsi tamam. Bu, neredeyse tüm durumlar için çalışması gereken basit bir sayaç kullanılarak yapılabilir.

İkinci olarak, bu yükleme görüntüsünü yalnızca başarılı bir AJAX çağrısında gizler. Hata durumları işlemek için, içine bakmak gerekir $.ajaxdaha karmaşık olan $.load, $.getve benzeri, ama çok daha esnek de.

Jonathon'un mükemmel çözümü IE8'de kırılıyor (animasyon hiç gösterilmiyor). Bunu düzeltmek için CSS'yi şu şekilde değiştirin:

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

jQuery, AJAX isteklerinin ne zaman başlayıp bittiğini gösteren olay kancaları sağlar. Yükleyicinizi göstermek için bunlara takılabilir.

Örneğin, aşağıdaki div'ı oluşturun:

<div id="spinner">
  <img src="images/spinner.gif" alt="Loading" />
</div>

display: noneStil sayfalarınızda olarak ayarlayın . İstediğiniz şekilde biçimlendirebilirsiniz. İsterseniz Ajaxload.info'da güzel bir yükleme görüntüsü oluşturabilirsiniz .

Ardından, Ajax istekleri gönderilirken otomatik olarak gösterilmesini sağlamak için aşağıdakine benzer bir şey kullanabilirsiniz:

$(document).ready(function () {

    $('#spinner').bind("ajaxSend", function() {
        $(this).show();
    }).bind("ajaxComplete", function() {
        $(this).hide();
    });

});

Gövde etiketinizi kapatmadan önce veya uygun gördüğünüz her yerde bu Javascript bloğunu sayfanızın sonuna ekleyin .

Şimdi, Ajax isteklerini her gönderdiğinizde #spinnerdiv gösterilir. İstek tamamlandığında tekrar gizlenir.

Turbolinks Rails kullanıyorsanız bu benim çözümüm:

Bu CoffeeScript

$(window).on 'page:fetch', ->
  $('body').append("<div class='modal'></div>")
  $('body').addClass("loading")

$(window).on 'page:change', ->
  $('body').removeClass("loading")

Bu Jonathan Sampson'ın ilk mükemmel cevabına dayanan SASS CSS

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

Mark H'nin dediği gibi blockUI böyle.

Ör .:

<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>

Obs .: http://www.ajaxload.info/ adresindeki ajax-loader.gif dosyasını aldım.

Diğer gönderilere gereken saygıyla, CSS3 ve jQuery kullanarak başka harici kaynaklar veya dosyalar kullanmadan çok basit bir çözümünüz var.

$('#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" />

Bu, düğmelerin kaybolmasını sağlayacak, yerine bir "yükleme" animasyonu görünecek ve sonunda bir başarı mesajı gösterecektir.

$(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>');
                    });
                }
        );
    });
});

Gördüğüm çözümlerin çoğu ya bir yükleme kaplaması tasarlamamızı, gizli tutmamızı ve gerektiğinde göstermemizi ya da bir gif ya da resim göstermemizi bekliyor.

Sağlam bir eklenti geliştirmek istedim, burada basit bir jQuery çağrısı ile yükleme ekranını görüntüleyebilir ve görev tamamlandığında yıkabilirim.

Kod aşağıdadır. Yazı tipi müthiş ve jQuery bağlıdır:

/**
 * 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)); 

Sadece bir js dosyasına yukarıdaki koymak ve proje boyunca dahil.

CSS ilavesi:

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

çağırma:

$.loadingSpinner();
$.removeLoadingSpinner();

ASP.Net MVC ile kullanırken using (Ajax.BeginForm(..., ayarını ajaxStartçalışmayacak unutmayın.

AjaxOptionsBu sorunun üstesinden gelmek için şunu kullanın :

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

Https://www.w3schools.com/howto/howto_css_loader.asp uyarınca , bu JS içermeyen 2 adımlı bir işlemdir:

1. Bu HTML'yi çeviriciyi istediğiniz yere ekleyin: <div class="loader"></div>

2. Gerçek çeviriciyi yapmak için bu CSS'yi ekleyin:

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

Animasyon için CSS3 kullanıyorum

/************ 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>