कैसे jQuery में लोड हो रहा है स्पिनर को दिखाने के लिए?

वोट
368

में प्रोटोटाइप मैं एक लोड हो रहा ... इस कोड के साथ छवि प्रदर्शित कर सकते हैं:

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

function showLoad () {
    ...
}

में jQuery , मैं इस के साथ एक तत्व में एक सर्वर पृष्ठ लोड कर सकते हैं:

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

लेकिन कैसे मैं के रूप में मैं प्रोटोटाइप में किया था इस आदेश के लिए एक लोडिंग स्पिनर देते हैं?

16/09/2008 को 00:18
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


24 जवाब

वोट
744

वहाँ कई तरीकों से कर रहे हैं। मेरे पसंदीदा तरीका तत्व पर ही ajaxStart / बंद घटनाओं के लिए एक समारोह संलग्न करने के लिए है।

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

ajaxStart / बंद कार्यों आग जब भी आप किसी भी अजाक्स कॉल करेंगे।

अद्यतन : jQuery 1.8, प्रलेखन कहा गया है कि के रूप में .ajaxStart/Stopकेवल के साथ संलग्न किया जाना चाहिए document। यह ऊपर टुकड़ा करने के लिए बदलना होगा:

var $loading = $('#loadingDiv').hide();
$(document)
  .ajaxStart(function () {
    $loading.show();
  })
  .ajaxStop(function () {
    $loading.hide();
  });
16/09/2008 को 00:21
का स्रोत उपयोगकर्ता

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

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

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

16/09/2008 को 00:23
का स्रोत उपयोगकर्ता

वोट
22

आप सही AJAX कॉल करने से पहले डोम में एनिमेटेड छवि डालें, और इसे हटाने के लिए एक इनलाइन समारोह कर सकते हैं ...

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

यह सुनिश्चित करें कि आपके एनीमेशन अनुवर्ती अनुरोधों पर एक ही फ्रेम पर शुरू होता है (कि अगर मायने रखती है) कर देगा। नोट IE के पुराने संस्करणों कि हो सकता है एनीमेशन के साथ कठिनाइयों है।

सौभाग्य!

16/09/2008 को 00:28
का स्रोत उपयोगकर्ता

वोट
2

जावास्क्रिप्ट

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

सीएसएस

#loading { background: url(/image/loading.gif) no-repeat center; }
26/10/2008 को 19:23
का स्रोत उपयोगकर्ता

वोट
10

: लोड हो रहा है प्लगइन का उपयोग http://plugins.jquery.com/project/loading

$.loading.onAjax({img:'loading.gif'});
29/07/2009 को 15:16
का स्रोत उपयोगकर्ता

वोट
194

jQuery के लिए मैं का उपयोग

jQuery.ajaxSetup({
  beforeSend: function() {
     $('#loader').show();
  },
  complete: function(){
     $('#loader').hide();
  },
  success: function() {}
});
05/03/2010 को 14:12
का स्रोत उपयोगकर्ता

वोट
8

संस्करण: मैं आईडी = "लोगो" के मुख्य पृष्ठ के ऊपर बाईं ओर के साथ एक आइकन है, एक स्पिनर gif फिर जब ajax काम कर रहा है शीर्ष (पारदर्शिता के साथ) पर नज़र आता है।

jQuery.ajaxSetup({
  beforeSend: function() {
     $('#logo').css('background', 'url(images/ajax-loader.gif) no-repeat')
  },
  complete: function(){
     $('#logo').css('background', 'none')
  },
  success: function() {}
});
02/05/2011 को 21:41
का स्रोत उपयोगकर्ता

वोट
6

आप बस एक ही टैग जिस पर आप बाद में एक अजाक्स कॉल का उपयोग कर सामग्री लोड होगा करने के लिए एक लोडर छवि प्रदान कर सकते हैं:

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

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

तुम भी एक छवि टैग के साथ स्पैन टैग की जगह ले सकता।

12/09/2011 को 13:26
का स्रोत उपयोगकर्ता

वोट
1

मैं यह करता हूँ:

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);
                        }
             });
29/09/2011 को 11:46
का स्रोत उपयोगकर्ता

वोट
2

मैं jQuery यूआई संवाद के साथ निम्नलिखित का उपयोग किया है। (शायद यह अन्य ajax कॉलबैक साथ काम करता है?)

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

अपनी सामग्री बदल दिया जाता है जब तक जब ajax कॉल पूरा करता है एक एनिमेटेड लोड हो रहा है gif शामिल हैं।

02/12/2011 को 15:55
का स्रोत उपयोगकर्ता

वोट
1

मेरे विचार से आप सही है। इस विधि भी वैश्विक है ...

हालांकि - यह जब आपके AJAX कॉल पेज पर ही कोई प्रभाव नहीं है के लिए एक अच्छा डिफ़ॉल्ट है। (पृष्ठभूमि उदाहरण के लिए बचाने के लिए)। (आप कभी भी यह बंद एक निश्चित ajax कॉल के लिए गुजर "वैश्विक" द्वारा बदल सकते हैं: झूठी - पर दस्तावेज़ देखें jQuery

AJAX कॉल पृष्ठ के भाग को ताज़ा करने के लिए है, मैं ताजा अनुभाग के लिए विशिष्ट होना मेरे "लोड हो रहा है" छवियों की तरह। मैं देखना कौन सा हिस्सा ताजा है चाहते हैं।

कल्पना कीजिए कि यह कैसे शांत अगर आप बस की तरह कुछ लिख सकता होगा:

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

और यह इस खंड पर एक "लोड हो रहा है" में दिखाई देगा। नीचे एक समारोह मुझे लगता है कि हैंडल "लोड हो रहा" प्रदर्शन ने लिखा भी है, लेकिन यह आप जिस क्षेत्र ajax में नवीनीकृत कर रहे हैं के लिए विशिष्ट है।

सबसे पहले, यह कैसे उपयोग करने के लिए मैं आपको दिखाते हैं

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

एक बुनियादी शुरू है कि आप अपनी इच्छानुसार वृद्धि कर सकते हैं - और यह कार्य है। यह बहुत लचीला है।

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);
};
12/07/2012 को 14:12
का स्रोत उपयोगकर्ता

वोट
31

तुम बस jQuery के उपयोग कर सकते हैं .ajaxसमारोह और उसके विकल्प का उपयोग beforeSendऔर कुछ समारोह जिसमें आप एक लोडर div की तरह कुछ और सफलता विकल्प पर आपको लगता है कि लोडर div छिपा कर सकते हैं दिखा सकते हैं परिभाषित करते हैं।

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

आप किसी भी स्पिनिंग Gif छवि हो सकता है। यहाँ एक वेबसाइट अपने रंग योजना के अनुसार एक महान AJAX लोडर जेनरेटर है: http://ajaxload.info/

30/08/2012 को 04:37
का स्रोत उपयोगकर्ता

वोट
6

साथ ही ajax घटनाओं के लिए वैश्विक डिफ़ॉल्ट सेट के रूप में, आप विशिष्ट तत्वों के लिए व्यवहार निर्धारित कर सकते हैं। शायद सिर्फ बदलते अपने वर्ग के लिए पर्याप्त हो सकता है?

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

उदाहरण सीएसएस, एक स्पिनर के साथ #myForm को छिपाने के लिए:

.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;  
}
04/09/2012 को 15:51
का स्रोत उपयोगकर्ता

वोट
7

मैं करने के लिए दो परिवर्तन के साथ समाप्त हो गया मूल जबाब

  1. JQuery 1.8 के रूप में, ajaxStart और ajaxStop केवल के साथ संलग्न किया जाना चाहिए document। यह यह मुश्किल ही फ़िल्टर कर एक ajax अनुरोध के कुछ है। सू ...
  2. पर स्विच किया जा ajaxSend और ajaxComplete यह संभव स्पिनर दिखाने से पहले वर्तमान ajax अनुरोध interspect है।

यह इन परिवर्तनों के बाद कोड है:

$(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();
    })
02/04/2013 को 10:48
का स्रोत उपयोगकर्ता

वोट
1

आप अपने खुद के कोड लिखने के लिए नहीं करना चाहते हैं, वहाँ भी प्लगइन्स बिल्कुल यही करते हैं की एक बहुत कुछ कर रहे हैं:

09/04/2013 को 15:08
का स्रोत उपयोगकर्ता

वोट
14

आप उपयोग कर रहे हैं $.ajax()तो आप इस तरह somthing उपयोग कर सकते हैं:

$.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'
    });  
05/06/2013 को 10:09
का स्रोत उपयोगकर्ता

वोट
1

यह मेरे लिए सबसे अच्छा तरीका है:

jQuery :

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

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

कॉफी :

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

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

डॉक्स: ajaxStart , ajaxStop

11/11/2013 को 13:48
का स्रोत उपयोगकर्ता

वोट
7

मैं भी इस सवाल का जवाब करने के लिए योगदान करना चाहते हैं। मैं jQuery में कुछ इसी तरह की तलाश में गया था और यह है कि क्या मैं अंततः का उपयोग कर समाप्त हो गया।

मैंने अपने लदान स्पिनर मिला http://ajaxload.info/ । मेरे समाधान पर इस सरल जवाब पर आधारित है http://christierney.com/2011/03/23/global-ajax-loading-spinners/

मूल रूप से अपने HTML मार्कअप और सीएसएस इस प्रकार दिखाई देगा:

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

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

और फिर jQuery के लिए आप कोड कुछ इस तरह दिखेगा:

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

यह बहुत ही सरल है :)

21/02/2014 को 07:17
का स्रोत उपयोगकर्ता

वोट
2

ध्यान दें कि आप स्पिनरों काम करने के लिए अतुल्यकालिक कॉल का उपयोग करना चाहिए (कम से कम है कि क्या वजह से मेरा ajax कॉल के बाद जब तक नहीं दिखा है और फिर तेजी से दूर चला गया के रूप में कॉल समाप्त किया था और स्पिनर हटा दिया है)।

$.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                
        }
    });
23/10/2014 को 06:20
का स्रोत उपयोगकर्ता

वोट
1

यदि आप एक लोडर हर बार एक सर्वर अनुरोध कर उपयोग करना चाहते हैं, तो आपको निम्न पैटर्न का उपयोग कर सकते हैं।

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

विशेष रूप से यह कोड jajaxloader प्लगइन (जो मैं अभी बनाया) का उपयोग करता है

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

03/03/2016 को 19:09
का स्रोत उपयोगकर्ता

वोट
4
$('#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>');

            }
        });
11/10/2016 को 16:17
का स्रोत उपयोगकर्ता

वोट
1

यह है कि विशिष्ट प्रयोजन के लिए एक बहुत ही सरल और स्मार्ट प्लगइन है: https://github.com/hekigan/is-loading

06/12/2016 को 14:39
का स्रोत उपयोगकर्ता

वोट
0

तुम हमेशा उपयोग कर सकते हैं ब्लॉक यूआई jQuery प्लगइन है जो आप के लिए सब कुछ करता है, और यह भी ब्लॉक किसी भी इनपुट के पेज जबकि ajax लोड कर रहा है। मामले प्लगइन काम नहीं कर दिया जा रहा है कि में, आप सही तरीके से इसका इस्तेमाल करने के बारे में पढ़ सकते हैं इस उत्तर में। इसकी जांच - पड़ताल करें।

15/08/2017 को 15:10
का स्रोत उपयोगकर्ता

वोट
0

मेरे ajax कोड इस तरह दिखता है, प्रभाव में, मैं सिर्फ async बाहर टिप्पणी की है: झूठी लाइन और स्पिनर दिखाई देता है।

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

मैं ajax कोड से पहले एक समारोह के भीतर स्पिनर दिखा रहा हूँ:

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

एचटीएमएल के लिए, मैं एक फ़ॉन्ट भयानक वर्ग का इस्तेमाल किया है:

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

आशा है कि यह किसी को मदद मिलती है।

04/06/2018 को 09:44
का स्रोत उपयोगकर्ता

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more