JQuery'de yükleme döndürücüsü nasıl gösterilir?

In Prototip Bu kod ile bir "yükleme ..." görüntüyü gösterebilir:

var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars, 
onLoading: showLoad, onComplete: showResponse} );

function showLoad () {
    ...
}

In jQuery Ben bununla bir unsuru haline sunucu sayfasını yükleyebilirsiniz:

$('#message').load('index.php?pg=ajaxFlashcard');

ancak Prototip'te yaptığım gibi bu komuta bir yükleme döndürücüsünü nasıl ekleyebilirim?

Birkaç yol var. Tercih ettiğim yol, öğenin kendisindeki ajaxStart / Stop olaylarına bir işlev eklemektir.

$('#loadingDiv')
    .hide()  // Hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })
;

AjaxStart / Stop işlevleri, herhangi bir Ajax çağrısı yaptığınızda etkinleşir.

Güncelleme : jQuery 1.8'den itibaren dokümantasyon .ajaxStart/Stopyalnızca eklenmesi gerektiğini belirtir document. Bu, yukarıdaki pasajı şuna dönüştürecektir:

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

JQuery için kullanıyorum

jQuery.ajaxSetup({
  beforeSend: function() {
     $('#loader').show();
  },
  complete: function(){
     $('#loader').hide();
  },
  success: function() {}
});

Sadece jQuery .ajaxişlevini kullanabilir ve seçeneğini kullanabilir ve beforeSendyükleyici div gibi bir şey gösterebileceğiniz bazı işlevleri tanımlayabilirsiniz ve başarı seçeneğinde yükleyici div'ı gizleyebilirsiniz.

jQuery.ajax({
    type: "POST",
    url: 'YOU_URL_TO_WHICH_DATA_SEND',
    data:'YOUR_DATA_TO_SEND',
    beforeSend: function() {
        $("#loaderDiv").show();
    },
    success: function(data) {
        $("#loaderDiv").hide();
    }
});

Herhangi bir Spinning Gif resminiz olabilir. Renk düzeninize göre harika bir AJAX Yükleyici Jeneratörü olan bir web sitesi: http://ajaxload.info/

Animasyonlu görüntüyü AJAX çağrısından hemen önce DOM'a ekleyebilir ve kaldırmak için bir satır içi işlev yapabilirsiniz ...

$("#myDiv").html('<img src="images/spinner.gif" alt="Wait" />');
$('#message').load('index.php?pg=ajaxFlashcard', null, function() {
  $("#myDiv").html('');
});

Bu, animasyonunuzun sonraki isteklerde aynı çerçevede başlamasını sağlar (bu önemliyse). IE'nin eski sürümlerinin animasyonda zorluk yaşayabileceğini unutmayın.

İyi şanslar!

$('#message').load('index.php?pg=ajaxFlashcard', null, showResponse);
showLoad();

function showResponse() {
    hideLoad();
    ...
}

http://docs.jquery.com/Ajax/load#urldatacallback

Eğer kullanıyorsanız $.ajax()böyle bir şey kullanabilirsiniz:

$.ajax({
        url: "destination url",
        success: sdialog,
        error: edialog,
        // shows the loader element before sending.
        beforeSend: function () { $("#imgSpinner1").show(); },
        // hides the loader after completion of request, whether successfull or failor.             
        complete: function () { $("#imgSpinner1").hide(); },             
        type: 'POST', dataType: 'json'
    });  

Yükleme eklentisini kullanın: http://plugins.jquery.com/project/loading

$.loading.onAjax({img:'loading.gif'});

Varyant: Ana sayfanın sol üst köşesinde id = "logo" olan bir simgem var; ajax çalışırken bir spinner gifinin üstüne (saydamlıkla) üst üste bindirilir.

jQuery.ajaxSetup({
  beforeSend: function() {
     $('#logo').css('background', 'url(images/ajax-loader.gif) no-repeat')
  },
  complete: function(){
     $('#logo').css('background', 'none')
  },
  success: function() {}
});

Orijinal cevapta iki değişiklik yaptım .

1. JQuery 1.8'den itibaren, ajaxStart ve ajaxStop sadece bağlı olmalıdır document. Bu, bazı ajax isteklerini filtrelemeyi zorlaştırır. Soo ...
2. AjaxSend ve ajaxComplete'a geçmek, çeviriciyi göstermeden önce mevcut ajax isteğinin kesişimini mümkün kılar.

Bu değişikliklerden sonraki kod:

$(document)
    .hide()  // hide it initially
    .ajaxSend(function(event, jqxhr, settings) {
        if (settings.url !== "ajax/request.php") return;
        $(".spinner").show();
    })
    .ajaxComplete(function(event, jqxhr, settings) {
        if (settings.url !== "ajax/request.php") return;
        $(".spinner").hide();
    })

Ben de bu cevaba katkıda bulunmak istiyorum. Ben jQuery benzer bir şey arıyordu ve bu nihayet kullanarak sona erdi.

Yükleme döndürücümü http://ajaxload.info/ adresinden aldım . Çözümüm http://christierney.com/2011/03/23/global-ajax-loading-spinners/ adresindeki bu basit cevaba dayanmaktadır .

Temel olarak HTML işaretlemeniz ve CSS'niz şöyle görünür:

<style>
     #ajaxSpinnerImage {
          display: none;
     }
</style>

<div id="ajaxSpinnerContainer">
     <img src="~/Content/ajax-loader.gif" id="ajaxSpinnerImage" title="working..." />
</div>

Ve sonra jQuery için kod şöyle görünecektir:

<script>
     $(document).ready(function () {
          $(document)
          .ajaxStart(function () {
               $("#ajaxSpinnerImage").show();
          })
          .ajaxStop(function () {
               $("#ajaxSpinnerImage").hide();
          });

          var owmAPI = "http://api.openweathermap.org/data/2.5/weather?q=London,uk&APPID=YourAppID";
          $.getJSON(owmAPI)
          .done(function (data) {
               alert(data.coord.lon);
          })
          .fail(function () {
               alert('error');
          });
     });
</script>

Bu kadar basit :)

Daha sonra bir Ajax çağrısı kullanarak içerik yükleyeceğiniz aynı etikete bir yükleyici resmi atayabilirsiniz:

$("#message").html('<span>Loading...</span>');

$('#message').load('index.php?pg=ajaxFlashcard');

Yayılma etiketini bir görüntü etiketiyle de değiştirebilirsiniz.

Ajax olayları için genel varsayılanları ayarlamanın yanı sıra, belirli öğeler için davranış ayarlayabilirsiniz. Belki de sadece sınıflarını değiştirmek yeterli olacaktır?

$('#myForm').ajaxSend( function() {
    $(this).addClass('loading');
});
$('#myForm').ajaxComplete( function(){
    $(this).removeClass('loading');
});

# MyForm'u bir döndürücüyle gizlemek için örnek CSS:

.loading {
    display: block;
    background: url(spinner.gif) no-repeat center middle;
    width: 124px;
    height: 124px;
    margin: 0 auto;
}
/* Hide all the children of the 'loading' element */
.loading * {
    display: none;  
}

İplikçilerin çalışması için eşzamansız çağrıları kullanmanız gerektiğini unutmayın (en azından mayın ajax çağrısından sonrasına kadar görünmemesine neden oldu ve daha sonra çağrı bittikten ve döndürücüyü çıkardıktan sonra hızla gitti).

$.ajax({
        url: requestUrl,
        data: data,
        dataType: 'JSON',
        processData: false,
        type: requestMethod,
        async: true,                         <<<<<<------ set async to true
        accepts: 'application/json',
        contentType: 'application/json',
        success: function (restResponse) {
            // something here
        },
        error: function (restResponse) {
            // something here                
        }
    });

$('#loading-image').html('<img src="/images/ajax-loader.gif"> Sending...');

        $.ajax({
            url:  uri,
            cache: false,
            success: function(){
                $('#loading-image').html('');           
            },

           error:   function(jqXHR, textStatus, errorThrown) {
            var text =  "Error has occured when submitting the job: "+jqXHR.status+ " Contact IT dept";
           $('#loading-image').html('<span style="color:red">'+text +'  </span>');

            }
        });

JQuery UI İletişim Kutusu ile aşağıdakileri kullandım. (Belki diğer ajax geri çağrılarıyla çalışır?)

$('<div><img src="/i/loading.gif" id="loading" /></div>').load('/ajax.html').dialog({
    height: 300,
    width: 600,
    title: 'Wait for it...'
});

Ajax çağrısı tamamlandığında içeriği değiştirilene kadar animasyonlu bir yükleme gif içerir.

Bu benim için en iyi yol:

jQuery :

$(document).ajaxStart(function() {
  $(".loading").show();
});

$(document).ajaxStop(function() {
  $(".loading").hide();
});

Kahve :

  $(document).ajaxStart ->
    $(".loading").show()

  $(document).ajaxStop ->
    $(".loading").hide()

Dokümanlar: ajaxStart , ajaxStop

JavaScript

$.listen('click', '#captcha', function() {
    $('#captcha-block').html('<div id="loading" style="width: 70px; height: 40px; display: inline-block;" />');
    $.get("/captcha/new", null, function(data) {
        $('#captcha-block').html(data);
    }); 
    return false;
});

CSS

#loading { background: url(/image/loading.gif) no-repeat center; }

Bu, belirli bir amaç için çok basit ve akıllı bir eklentidir: https://github.com/hekigan/is-loading

Bunu yapıyorum:

var preloaderdiv = '<div class="thumbs_preloader">Loading...</div>';
           $('#detail_thumbnails').html(preloaderdiv);
             $.ajax({
                        async:true,
                        url:'./Ajaxification/getRandomUser?top='+ $(sender).css('top') +'&lef='+ $(sender).css('left'),
                        success:function(data){
                            $('#detail_thumbnails').html(data);
                        }
             });

Bence haklısın. Bu yöntem çok küresel ...

Ancak, AJAX çağrınızın sayfanın kendisi üzerinde hiçbir etkisi olmadığında iyi bir varsayılan değerdir. (örneğin arka plan kaydetme). (her zaman "global" ileterek belirli bir ajax çağrısı için kapatabilirsiniz: false - jquery'deki belgelere bakın

AJAX çağrısı sayfanın bir bölümünü yenilemek istendiğinde, "yükleme" görüntülerimin yenilenen bölüme özgü olmasını seviyorum. Hangi bölümün yenilendiğini görmek istiyorum.

Sadece şöyle bir şey yazabiliyorsanız ne kadar havalı olabileceğini düşünün:

$("#component_to_refresh").ajax( { ... } ); 

Ve bu, bu bölümde bir "yükleme" gösterecektir. Aşağıda, "yükleme" ekranını da işlediğini yazdığım bir işlev ama ajax'ta yenilediğiniz alana özgü.

Önce, nasıl kullanılacağını göstereyim

<!-- assume you have this HTML and you would like to refresh 
      it / load the content with ajax -->

<span id="email" name="name" class="ajax-loading">
</span>

<!-- then you have the following javascript --> 

$(document).ready(function(){
     $("#email").ajax({'url':"/my/url", load:true, global:false});
 })

Ve bu işlev - istediğiniz gibi geliştirebileceğiniz temel bir başlangıç. çok esnektir.

jQuery.fn.ajax = function(options)
{
    var $this = $(this);
    debugger;
    function invokeFunc(func, arguments)
    {
        if ( typeof(func) == "function")
        {
            func( arguments ) ;
        }
    }

    function _think( obj, think )
    {
        if ( think )
        {
            obj.html('<div class="loading" style="background: url(/public/images/loading_1.gif) no-repeat; display:inline-block; width:70px; height:30px; padding-left:25px;"> Loading ... </div>');
        }
        else
        {
            obj.find(".loading").hide();
        }
    }

    function makeMeThink( think )
    {
        if ( $this.is(".ajax-loading") )
        {
            _think($this,think);
        }
        else
        {
            _think($this, think);
        }
    }

    options = $.extend({}, options); // make options not null - ridiculous, but still.
    // read more about ajax events
    var newoptions = $.extend({
        beforeSend: function()
        {
            invokeFunc(options.beforeSend, null);
            makeMeThink(true);
        },

        complete: function()
        {
            invokeFunc(options.complete);
            makeMeThink(false);
        },
        success:function(result)
        {
            invokeFunc(options.success);
            if ( options.load )
            {
                $this.html(result);
            }
        }

    }, options);

    $.ajax(newoptions);
};

Kendi kodunuzu yazmak istemiyorsanız, bunu yapan birçok eklenti de vardır:

• https://github.com/keithhackbarth/jquery-loading
• http://plugins.jquery.com/project/loading

Her sunucu isteği yaptığınızda bir yükleyici kullanmayı planlıyorsanız, aşağıdaki kalıbı kullanabilirsiniz.

 jTarget.ajaxloader(); // (re)start the loader
 $.post('/libs/jajaxloader/demo/service/service.php', function (content) {
     jTarget.append(content); // or do something with the content
 })
 .always(function () {
     jTarget.ajaxloader("stop");
 });

Bu kod özellikle jajaxloader eklentisini kullanır (az önce oluşturduğum)

https://github.com/lingtalfi/JAjaxLoader/

Benim ajax kodu şöyle görünüyor, aslında, ben sadece async: false satır yorum var ve spinner ortaya çıkıyor.

$.ajax({
        url: "@Url.Action("MyJsonAction", "Home")",
        type: "POST",
        dataType: "json",
        data: {parameter:variable},
        //async: false, 

        error: function () {
        },

        success: function (data) {
          if (Object.keys(data).length > 0) {
          //use data 
          }
          $('#ajaxspinner').hide();
        }
      });

Ben ajax kodu önce bir işlev içinde spinner gösteriyor:

$("#MyDropDownID").change(function () {
        $('#ajaxspinner').show();

Html için, bir font müthiş sınıf kullandım:

<i id="ajaxspinner" class="fas fa-spinner fa-spin fa-3x fa-fw" style="display:none"></i>

Umarım birine yardımcı olur.

Her zaman sizin için her şeyi yapan Block UI jQuery eklentisini kullanabilirsiniz ve hatta ajax yüklenirken herhangi bir girişin sayfasını engeller. Eklentinin çalışmıyor gibi görünmesi durumunda, bu cevapta doğru şekilde kullanmanın yollarını okuyabilirsiniz . Bunu kontrol et.