it-swarm-tr.com

JQuery'de yükleme eğiricisi nasıl gösterilebilir?

İçinde Prototip Bu kodla bir "yükleniyor ..." resmini gösterebilirim:

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

function showLoad () {
    ...
}

İçinde jQuery, Bir sunucu sayfasını bir elemente bununla yükleyebilirim:

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

fakat prototipte yaptığım gibi bu komutu nasıl bir yükleyici eklerim?

391
Edward Tanguay

Birkaç yol var. Tercih ettiğim yöntem, elemanın üzerindeki 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 görüşmesi yaptığınızda patlar.

Güncelleme: jQuery 1.8'den itibaren, belgeler .ajaxStart/Stop dosyasının yalnızca document öğesine eklenmesi gerektiğini belirtir. Bu, yukarıdaki pasajı şuna dönüştürür:

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

JQuery için kullanıyorum

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

JQuery'nin .ajax işlevini kullanabilir ve beforeSend seçeneğini kullanabilir ve içinde bir loader div gibi bir şey gösterebileceğiniz bazı fonksiyon tanımlayabilirsiniz ve başarı seçeneğinde o loader div'i 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 resmine sahip olabilirsiniz. İşte size renk düzeninize göre harika bir AJAX Yükleyici Jeneratör: http://ajaxload.info/

37
Seeker

Animasyonlu resmi DOM’a AJAX çağrısından hemen önce yerleştirebilir ve kaldırmak için satır içi işlevini yapabilirsiniz ...

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

Bu, animasyonunuzun sonraki taleplerde aynı karede başlamasını sağlar (eğer önemliyse). IE might 'in eski sürümlerinin animasyonla ilgili zorlukları olduğunu unutmayın.

İyi şanslar!

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

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

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

20
Brent

$.ajax() kullanıyorsanız şunun gibi 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'
    });  
15
Amin Saqi

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

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

Varyasyon: Ana sayfanın sol üst kısmında id = "logo" olan bir simge var; Bir iplikçi gif daha sonra, ajax çalışırken üste (saydamlıkla) yerleştirilir.

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

Ben de bu cevaba katkıda bulunmak istiyorum. JQuery'de benzer bir şey arıyordum ve sonunda kullanmaya başladım.

Yükleyicimi http://ajaxload.info/ adresinden aldım. Çözümüm şu basit cevaba dayanıyor: http://christierney.com/2011/03/23/global-ajax-loading-spinners/ .

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 kodunu böyle bir şey olurdu:

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

7
Brendan Vogt

orijinal cevap için iki değişiklik yaptım.

  1. JQuery 1.8'den itibaren, ajaxStart ve ajaxStop yalnızca documentöğesine eklenmelidir. Bu, yalnızca bazı ajax isteklerini filtrelemeyi zorlaştırır. Soo ...
  2. ajaxSend ve ajaxComplete 'e geçmek, eğiriciyi göstermeden önce mevcut ajax isteğini kesmeyi 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();
    })
7
Emil Stenström

Yükleyici görüntüsünü, daha sonra Ajax çağrısı kullanarak içerik yükleyeceğiniz etikete atayabilirsiniz:

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

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

Span etiketini resim etiketiyle de değiştirebilirsiniz.

7
Umesh kumar

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

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

Örnek döndürücü ile # myForm öğesini gizlemek için CSS örneği:

.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;  
}
6
LeeGee
$('#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>');

            }
        });
4

İplikçilerin çalışması için eşzamansız çağrıları kullanmanız gerektiğine dikkat edin (en azından bu, benim ajax çağrısının sonrasına kadar göstermemesine neden olan şeydi ve çağrı sona erdiğinde ve toplayıcıyı çıkarırken hızlıca ortadan kalktı).

$.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                
        }
    });
4
Shane Rowatt

Aşağıdakileri jQuery UI Dialog ile kullandım. (Belki diğer ajax geri aramaları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 hareketli bir yükleme gif'i içerir.

2
Quinn Comendant

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; }
2
Jerry

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

Belgeler: ajaxStart , ajaxStop

2
Fred K

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

2
andcl

Her sunucu isteğinde bulunduğunuzda bir yükleyici kullanmayı planlıyorsanız, aşağıdaki modeli 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 (yeni oluşturdum)

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

1
ling

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

1
keithhackbarth

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

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

Ancak - AJAX çağrınızın sayfa üzerinde bir etkisi olmadığı zamanlar için iyi bir varsayılandır. (örneğin, arka plan kaydetme). ("global" ileterek her zaman belirli bir ajax araması için kapatabilirsiniz: false - jquery adresindeki belgelere bakın.

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

Şunun gibi basit bir şey yazabilseydiniz ne kadar havalı olacağını hayal edin:

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

Ve bu, bu bölümde bir "yükleme" gösterir. Aşağıda, "yükleme" ekranının da işlediğini yazdığım, ancak ajax'ta yenilendiğiniz bölgeye özgü olan bir fonksiyon var.

İlk ö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 fonksiyon - 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);
};
1
guy mograbi

Ajax kodum şuna benziyor, aslında async: false satırını yorumladım ve döndürücü 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();
        }
      });

Spinleyiciyi bir fonksiyon içinde ajax kodundan önce gösteriyorum:

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

Html için yazı tipi müthiş bir 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.

1
Jaggan_j

Her zaman Her şeyi sizin için yapan UI jQuery eklentisini kullanabilirsiniz ve ajax yüklenirken herhangi bir girişin sayfasını bile engeller. Eklentinin çalışmadığı görülüyorsa, bu cevapta kullanmanın doğru yolunu okuyabilirsiniz. Bir göz atın.

0
SamyCode