it-swarm-id.com

Bagaimana cara menunjukkan pemuatan pemintal di jQuery?

Di 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 dapat memuat halaman server menjadi sebuah elemen dengan ini:

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

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

391
Edward Tanguay

Ada beberapa cara. Cara pilihan saya 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/Stop hanya boleh dilampirkan ke document. Ini akan mengubah cuplikan di atas menjadi:

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

Untuk jQuery saya gunakan

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

Anda bisa menggunakan fungsi .ajax jQuery dan menggunakan opsinya beforeSend dan mendefinisikan beberapa fungsi di mana Anda dapat menampilkan sesuatu seperti div pemuat dan pada opsi keberhasilan Anda dapat menyembunyikan div pemuat itu.

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 sangat bagus AJAX Generator Loader sesuai dengan skema warna Anda: http://ajaxload.info/

37
Seeker

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!

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

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

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

20
Brent

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'
    });  
15
Amin Saqi

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

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

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

Saya juga ingin berkontribusi untuk jawaban ini. Saya sedang mencari sesuatu yang serupa di jQuery dan ini 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 :)

7
Brendan Vogt

Saya berakhir dengan dua perubahan pada balasan asli .

  1. Pada jQuery 1.8, ajaxStart dan ajaxStop hanya boleh dilampirkan ke 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();
    })
7
Emil Stenström

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.

7
Umesh kumar

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

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

Saya telah menggunakan yang berikut dengan Dialog UI jQuery. (Mungkin berhasil 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.

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

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

2
Fred K

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

2
andcl

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/

1
ling

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

1
keithhackbarth

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

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 sebagian 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);
};
1
guy mograbi

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.

1
Jaggan_j

Anda selalu dapat menggunakan Blok UI jQuery plugin 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. Lihat.

0
SamyCode