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


412

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

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

function showLoad () {
    ...
}

JQuery में , मैं इसके साथ एक सर्वर पेज को एक तत्व में लोड कर सकता हूं:

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

लेकिन मैं इस कमांड में एक लोडिंग स्पिनर को कैसे संलग्न करूं जैसा कि मैंने प्रोटोटाइप में किया था?

जवाबों:


793

कुछ तरीके हैं। मेरा पसंदीदा तरीका तत्व पर ajaxStart / Stop घटनाओं के लिए एक फ़ंक्शन संलग्न करना है।

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

जब भी आप कोई भी अजाक्स कॉल करते हैं, ajaxStart / Stop फ़ंक्शन फायर हो जाएगा।

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

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

48
यह शायद एक DIV में एक साधारण भार के लिए बहुत अधिक वैश्विक है।
मोंट्रिलिस्ट

363
बहुत वैश्विक? कितने अलग "कृपया प्रतीक्षा करें" संदेश आप चाहते हैं?
निकफ 17

23
इस तरह दुर्भाग्यवश आप लोडिंग डिव पोजिशनिंग को नियंत्रित नहीं कर सकते हैं, यदि आप केवल एक मोडल लोडिंग विंडो नहीं दिखाना चाहते हैं, लेकिन इसे
ऐजैक्स कंटेंट के

10
ajaxStart और ajaxStop jQuery इवेंट्स हैं, ताकि आप उन्हें नाम दे सकें: stackoverflow.com/questions/1191485/… docs.jquery.com/Namespaced_Events
डेविड ज़िया

10
यदि jQuery> = 1.9 का उपयोग कर, ajaxStart और ajaxStop घटनाओं को $ (दस्तावेज़) में संलग्न करें। jquery.com/upgrad-guide/1.9/…
Domenic

213

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

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

13
मेरे लिए काम करता है, html में कुछ ऐसा होना चाहिए: <div id = 'loader'> <img src = "spinner.gif" /> </ div>
yigal

7
यह मेरे लिए सबसे साफ था। AjaxSetup के बजाय, मैंने पहले रखा: और पूरा: $ ajax के अंदर ({... कथन।
kenswdev

4
पता नहीं कि यह क्या है, लेकिन इसका उपयोग करने वाले प्रलेखन में jQuery का उल्लेख है ।ajaxSetup () का उपयोग करने की अनुशंसा नहीं की जाती है। लिंक
पीएसी

यहां ध्यान दें कि beforeSendहर कॉल से पहले कॉल किया जाता है, जबकि ajaxStartट्रिगर तभी किया जाता है जब पहला अजाक्स विधि कहा जाता है। इसी तरह ajaxStop, यह तब कहा जाता है जब अंतिम अजाक्स कॉल खत्म होता है। यदि आपके पास एक से अधिक समवर्ती अनुरोध हैं, तो इस उत्तर में स्निपेट ठीक से काम नहीं करेगा।
निक

अगर अजाक्स कॉल आउट (मैक के लिए फ़ायरफ़ॉक्स 28) मेरे लिए काम नहीं करता है।
osa

48

आप सिर्फ 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/


16
successयदि कोई त्रुटि होती है बुलाया नहीं किया जाएगा, लेकिन "आप हमेशा एक प्राप्त होगा completeके अनुसार भी सिंक्रोनस अनुरोध के लिए, कॉलबैक," jQuery अजाक्स घटनाक्रम
लीजी

23

आप AJAX कॉल से ठीक पहले DOM में एनिमेटेड इमेज डाल सकते हैं, और इसे हटाने के लिए इनलाइन फ़ंक्शन कर सकते हैं ...

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

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

सौभाग्य!


13
शीर्ष टिप: स्पिनर.गिफ़ को एक div में प्रदर्शित करें जिसमें कोई भी सेट नहीं है। अन्यथा आपको थोड़ा विलंबित स्पिनर प्रभाव मिल सकता है क्योंकि स्पिनर अभी भी डाउनलोड करता है।
यूरियाडियम

अच्छा टिप, किसी और के प्लगइन का उपयोग करने की तुलना में बहुत सरल
गॉर्डन थॉम्पसन

अच्छा! लेकिन प्रिय, एक बात और कि मैं स्पिनर को 2 सेकंड के लिए प्रदर्शित करना चाहता हूं यहां तक ​​कि पेज पहले ही लोड हो चुका है।
दोनों FM

5
@BothFM क्योंकि लोग चीजों का इंतजार करने का आनंद लेते हैं ...?
जोश स्टोडोला

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

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

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


आपको वहाँ समय की समस्या हो सकती है, है ना?
टिम ब्यूटे

2
@UltimateBrent मुझे लगता है कि आप इसे गलत समझ गए। शोऑलड () कॉलबैक क्यों नहीं है? जावास्क्रिप्ट सामग्री को अतुल्यकालिक रूप से लोड करेगा। शोलेड () सही होने पर कंटेंट लोड होने से पहले भी काम करेगा।
जसीम

2
@ जसीम I एक समान विधि का भी उपयोग करता है और यह वास्तव में async कॉल पर निर्भर करता है। मैं ajax कॉल से पहले कहीं भी showLoad रखूंगा, लेकिन पूरे बिंदु एक स्पिनर को दिखाने के लिए है, JS को कॉल शुरू करने दें, और AJAX पूरा होने के बाद एक कॉलबैक में स्पिनर को मार दें।
नेनोटलेप

17

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

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

11

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

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

10
इस सरल कार्य के लिए एक प्लगइन? यह वास्तव में एक अच्छा समाधान नहीं है? कौन एक पृष्ठ पर 100 स्क्रिप्ट लोड करना चाहता है?
जसीम

2
माना। यदि आप बेहतर प्रदर्शन चाहते हैं, तो संपीड़ित और संक्षिप्त करें।
नाथन बुबना

9
असहमति: अलग और संशोधन, पुन: उपयोग कोड, यदि आप अपने काम को बनाए रखने में सक्षम होना चाहते हैं और दूसरों को भी ऐसा करना है। आपके उपयोगकर्ता के पास ऐसे घटिया कनेक्शन का क्या मौका है जो उनके ग्राहक प्लग इन के साथ-साथ आपके कोड को लोड नहीं कर सकते?
लीगी

@NathanBubna लिंक मृत है
स्प्रिंगलेनर

"आपके उपयोगकर्ता के पास ऐसे खराब कनेक्शन होने का क्या मौका है जो उनके ग्राहक प्लग इन के साथ-साथ आपके कोड को लोड नहीं कर सकते हैं?" बहुत अच्छा मैं कहूँगा।
andrew oxenburgh

9

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

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

9

मैंने मूल उत्तर में दो बदलाव किए ।

  1. 1.8 jQuery के रूप में, 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();
    })

अच्छा काम है। ajaxCompleteसमय से पहले ही आग जब अनुरोध पुन: प्रयास, इसलिए मैं का एक संयोजन का उपयोग किया है लगता है ajaxSendऔर ajaxStopऔर यह बहुत अच्छा काम करता है।
महन

@SchweizerSchoggi: ऐसे अन्य विषय हैं जो उस प्रश्न का उत्तर देते हैं, खोज का उपयोग करें!
एमिल स्टेंस्ट्रम 14

8

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

मुझे अपना लोडिंग स्पिनर http://ajaxload.info/ से मिला । मेरा समाधान http://christierney.com/2011/03/23/global-ajax-loading-spotners/ पर इस सरल उत्तर पर आधारित है ।

मूल रूप से आपका HTML मार्कअप और CSS इस तरह दिखेगा:

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

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


8

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

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

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

आप एक छवि टैग के साथ स्पैन टैग को भी बदल सकते हैं।


1
इस तरह से UI का प्रबंधन करना कठिन होगा। हमें "लोडिंग" टेक्स्ट और अंतिम संदेश के लिए पूरी तरह से अलग शैलियों की आवश्यकता हो सकती है। हम इस समस्या से निपटने के लिए ऊपर उल्लिखित कॉलबैक विधि का उपयोग कर सकते हैं
जस्सीम

6

अजाक्स घटनाओं के लिए वैश्विक चूक स्थापित करने के साथ-साथ आप विशिष्ट तत्वों के लिए व्यवहार निर्धारित कर सकते हैं। शायद सिर्फ उनकी कक्षा बदलने से काफी होगा?

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

1
यह मेरे विचार में चयनित उत्तर होना चाहिए। साभार @LeeGee
नम जी वीयू

वास्तव में महान जवाब
रस्कोलनिकोव

4

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

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

            }
        });

पारदर्शी पृष्ठभूमि के साथ ajaxload.info से डाउनलोड की गई छवि के साथ सबसे छोटा तरीका छवि टैग सम्मिलित करना होगा
इजाबेला

2

मैंने jQuery UI डायलॉग के साथ निम्नलिखित का उपयोग किया है। (शायद यह अन्य अजाक्स कॉलबैक के साथ काम करता है?)

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

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


2

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

jQuery :

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

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

कॉफी :

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

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

डॉक्स: ajaxStart , ajaxStop


सही है, और आप इस उत्तर में उल्लिखित प्लगइन के साथ मिलकर इसका उपयोग कर सकते हैं यदि आप चाहें तो आप हैं ...
मैट

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

2

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


बहुत अच्छे! खासकर अगर आप डेमो पर एक नज़र डालते हैं ... डोम तत्वों को अक्षम करें, टैग में, पूर्ण ओवरले, तत्व ओवरले ... यह आपकी ज़रूरत की हर चीज प्रदान करता है। और आप आसानी से फुल ओवरले को इस उत्तर के साथ जोड़ सकते हैं ताकि यह तुरंत काम कर सके।
मैट

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

1

मेरे विचार से आप सही है। यह विधि बहुत वैश्विक है ...

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

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

कल्पना करें कि यदि आप कुछ ऐसा लिख ​​सकते हैं तो यह कितना अच्छा होगा:

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


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 plugin का उपयोग करता है (जो मैंने अभी बनाया है)

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


1

मेरा अजाक्स कोड इस तरह दिखता है, वास्तव में, मैंने सिर्फ 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();

Html के लिए, मैंने एक फ़ॉन्ट भयानक वर्ग का उपयोग किया है:

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

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


0

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

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.