Bagaimana cara menunjukkan pemuatan pemintal di jQuery?

Dalam Prototipe saya dapat menampilkan gambar "memuat ..." dengan kode ini:

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

function showLoad () {
    ...
}

Di jQuery , saya bisa memuat halaman server ke dalam elemen dengan ini:

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

tetapi bagaimana cara melampirkan pemintal pemuatan ke perintah ini seperti yang saya lakukan pada Prototipe?

Ada beberapa cara. Cara yang saya sukai adalah melampirkan fungsi ke ajaxStart / Stop events pada elemen itu sendiri.

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

Fungsi ajaxStart / Stop akan menyala setiap kali Anda melakukan panggilan Ajax.

Pembaruan : Pada jQuery 1.8, dokumentasi menyatakan bahwa .ajaxStart/Stophanya boleh dilampirkan document. Ini akan mengubah cuplikan di atas menjadi:

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

Untuk jQuery saya gunakan

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

Anda bisa menggunakan fungsi jQuery .ajaxdan menggunakan opsi beforeSenddan mendefinisikan beberapa fungsi di mana Anda dapat menampilkan sesuatu seperti loader loader dan pada opsi sukses Anda dapat menyembunyikan div loader tersebut.

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

Anda dapat memiliki gambar Gif Berputar. Berikut adalah situs web yang merupakan Generator Loader AJAX yang hebat sesuai dengan skema warna Anda: http://ajaxload.info/

Anda dapat memasukkan gambar animasi ke dalam DOM tepat sebelum panggilan AJAX, dan melakukan fungsi sebaris untuk menghapusnya ...

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

Ini akan memastikan animasi Anda dimulai pada frame yang sama pada permintaan berikutnya (jika itu penting). Perhatikan bahwa versi lama IE mungkin mengalami kesulitan dengan animasi.

Semoga berhasil!

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

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

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

Jika Anda menggunakan, $.ajax()Anda dapat menggunakan sesuatu seperti ini:

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

Gunakan plugin pemuatan: http://plugins.jquery.com/project/loading

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

Varian: Saya memiliki ikon dengan id = "logo" di kiri atas halaman utama; spinner gif kemudian dilapis di atas (dengan transparansi) saat ajax bekerja.

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

Saya berakhir dengan dua perubahan pada balasan asli .

1. Pada jQuery 1.8, ajaxStart dan ajaxStop hanya boleh dilampirkan document. Ini membuat lebih sulit untuk memfilter hanya beberapa permintaan ajax. Soo ...
2. Beralih ke ajaxSend dan ajaxComplete memungkinkan untuk memotong permintaan ajax saat ini sebelum menampilkan pemintal.

Ini adalah kode setelah perubahan ini:

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

Saya juga ingin berkontribusi untuk jawaban ini. Saya sedang mencari sesuatu yang serupa di jQuery dan ini yang akhirnya saya gunakan.

Saya mendapatkan pemintal pemuatan dari http://ajaxload.info/ . Solusi saya didasarkan pada jawaban sederhana ini di http://christierney.com/2011/03/23/global-ajax-loading-spinners/ .

Pada dasarnya markup dan CSS HTML Anda akan terlihat seperti ini:

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

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

Dan kemudian Anda kode untuk jQuery akan terlihat seperti ini:

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

Sesederhana itu :)

Anda cukup menetapkan gambar pemuat ke tag yang sama di mana Anda nanti akan memuat konten menggunakan panggilan Ajax:

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

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

Anda juga dapat mengganti tag rentang dengan tag gambar.

Selain mengatur standar global untuk acara ajax, Anda dapat mengatur perilaku untuk elemen tertentu. Mungkin mengubah kelas saja sudah cukup?

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

Contoh CSS, untuk menyembunyikan #myForm dengan pemintal:

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

Perhatikan bahwa Anda harus menggunakan panggilan asinkron agar pemintal bekerja (setidaknya itulah yang menyebabkan tambang tidak muncul hingga setelah panggilan ajax dan kemudian dengan cepat pergi setelah panggilan selesai dan melepas pemintal).

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

            }
        });

Saya telah menggunakan yang berikut dengan Dialog UI jQuery. (Mungkin bekerja dengan panggilan balik ajax lainnya?)

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

Ini berisi gif pemuatan animasi sampai isinya diganti ketika panggilan ajax selesai.

Ini cara terbaik bagi saya:

jQuery :

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

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

Kopi :

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

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

Documents: 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; }

Ini adalah plugin yang sangat sederhana dan cerdas untuk tujuan khusus itu: https://github.com/hekigan/is-loading

Saya melakukan ini:

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

Saya pikir kamu benar. Metode ini terlalu global ...

Namun - ini adalah standar yang baik untuk saat panggilan AJAX Anda tidak berpengaruh pada halaman itu sendiri. (save latar misalnya). (Anda selalu dapat mematikannya untuk panggilan ajax tertentu dengan mengirimkan "global": false - lihat dokumentasi di jquery

Ketika panggilan AJAX dimaksudkan untuk menyegarkan bagian dari halaman, saya suka gambar "memuat" saya untuk spesifik ke bagian yang di-refresh. Saya ingin melihat bagian mana yang disegarkan.

Bayangkan betapa kerennya jika Anda bisa menulis sesuatu seperti:

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

Dan ini akan menunjukkan "memuat" pada bagian ini. Di bawah ini adalah fungsi yang saya tulis yang menangani tampilan "memuat" juga tetapi khusus untuk area yang Anda refresh di ajax.

Pertama, izinkan saya menunjukkan kepada Anda bagaimana menggunakannya

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

Dan ini adalah fungsinya - awal dasar yang dapat Anda tingkatkan sesuai keinginan. ini sangat fleksibel.

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

Jika Anda tidak ingin menulis kode Anda sendiri, ada juga banyak plugin yang melakukan hal itu:

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

Jika Anda berencana untuk menggunakan loader setiap kali Anda membuat permintaan server, Anda dapat menggunakan pola berikut.

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

Kode ini khususnya menggunakan plugin jajaxloader (yang baru saja saya buat)

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

Kode ajax saya terlihat seperti ini, pada dasarnya, saya baru saja berkomentar async: baris palsu dan pemintal muncul.

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

Saya menunjukkan pemintal dalam suatu fungsi sebelum kode ajax:

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

Untuk Html, saya telah menggunakan kelas font yang mengagumkan:

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

Semoga ini bisa membantu seseorang.

Anda selalu dapat menggunakan plugin Blok UI jQuery yang melakukan segalanya untuk Anda, dan itu bahkan memblokir halaman dari setiap input saat ajax sedang memuat. Jika plugin tampaknya tidak berfungsi, Anda dapat membaca tentang cara yang tepat untuk menggunakannya dalam jawaban ini. Coba lihat.