JQuery के साथ "व्यस्त" संकेतक कैसे प्रदर्शित करें?

Question 1

मैं वेब पेज में एक विशिष्ट बिंदु पर कताई "व्यस्त" संकेतक कैसे प्रदर्शित कर सकता हूं?

जब एक अजाक्स अनुरोध शुरू / पूरा हो जाता है तो मैं संकेतक को शुरू / बंद करना चाहता हूं।

क्या यह वास्तव में एक एनिमेटेड जिफ को दिखाने / छिपाने की बात है, या एक और अधिक सुरुचिपूर्ण समाधान है?

Question 2

आप बस एक जिफ़ को दिखा / छुपा सकते हैं, लेकिन आप इसे ajaxSetup पर एम्बेड भी कर सकते हैं, इसलिए इसे प्रत्येक ऐजैक्स अनुरोध पर कहा जाता है।

$.ajaxSetup({
    beforeSend:function(){
        // show gif here, eg:
        $("#loading").show();
    },
    complete:function(){
        // hide gif here, eg:
        $("#loading").hide();
    }
});

एक नोट यह है कि यदि आप लोडिंग स्पिनर के बिना एक विशिष्ट अजाक्स अनुरोध करना चाहते हैं, तो आप इसे इस तरह से कर सकते हैं:

$.ajax({
   global: false,
   // stuff
});

इस तरह से पिछले $ .ajaxSetup जो हमने किया है वह अनुरोध को प्रभावित नहीं करेगा global: false।

अधिक विवरण यहां उपलब्ध है: http://api.jquery.com/jQuery.ajaxSetup

Question 3

JQuery के दस्तावेज़ निम्नलिखित की तरह कुछ करने की सलाह देते हैं:

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

#loadingइसमें आपके व्यस्त संकेतक के साथ तत्व कहां है।

संदर्भ:

http://api.jquery.com/ajaxStart/
http://api.jquery.com/ajaxStop/
इसके अलावा, jQuery.ajaxSetupएपीआई स्पष्ट रूप से jQuery.ajaxSetupइनसे बचने की सलाह देता है :

नोट: वैश्विक कॉलबैक कार्यों उनके संबंधित वैश्विक अजाक्स ईवेंट हैंडलर तरीकों के साथ स्थापित किया जाना चाहिए .ajaxStart(), .ajaxStop(), .ajaxComplete(), .ajaxError(), .ajaxSuccess(), .ajaxSend()भीतर से -rather optionsके लिए वस्तु $.ajaxSetup()।

Question 4

मैं केवल एक IMG दिखाने / छिपाने के लिए हूं, जैसा कि अन्य ने कहा है। मुझे एक अच्छी वेबसाइट मिली जो "लोडिंग जिफ़" बनाती है

लिंक मैं बस इसे अंदर डाल देता हूं divऔर डिफ़ॉल्ट रूप से display: none;(सीएसएस) से छिपाता हूं, फिर जब आप फ़ंक्शन को कॉल करते हैं तो छवि दिखाते हैं, एक बार जब इसका पूरा फिर से छिप जाता है।

Question 5

हाँ, यह वास्तव में केवल एक एनिमेटेड जिफ को दिखाने / छिपाने की बात है।

Question 6

मैंने इसे अपनी परियोजना में किया था,

जिफ़ के रूप में बैक ग्राउंड यूआरएल के साथ एक डिव बनाते हैं, जो कि एनीमेशन जिफ के अलावा और कुछ नहीं है

<div class="busyindicatorClass"> </div>

.busyindicatorClass
{
background-url///give animation here
}

अपने ajax कॉल में, इस वर्ग को div में जोड़ें और ajax सफलता वर्ग को हटा दें।

यह चाल thatsitit करेगा।

मुझे बताएं कि अगर आपको किसी और चीज़ की ज़रूरत है, तो मैं आपको और जानकारी दे सकता हूं

में अजाक्स सफलता वर्ग को हटा दें

success: function(data) {
    remove class using jquery
  }

Question 7

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

var loading = false;

$.ajaxSetup({
    beforeSend: function () {
        // Display loading icon if AJAX call takes >1 second
        loading = true;
        setTimeout(function () {
            if (loading) {
                // show loading image
            }
        }, 1000);            
    },
    complete: function () {
        loading = false;
        // hide loading image
    }
});

Question 8

मैंने इसे अपने प्रोजेक्ट में किया:

आवेदन में वैश्विक घटनाक्रम। जेएस:

$(document).bind("ajaxSend", function(){
   $("#loading").show();
 }).bind("ajaxComplete", function(){
   $("#loading").hide();
 });

"लोडिंग" दिखाने और छिपाने के लिए तत्व है!

संदर्भ: http://api.jquery.com/Ajax_Events/

Question 9

मुझे इस्तेमाल करना था

HTML:
   <img id="loading" src="~/Images/spinner.gif" alt="Updating ..." style="display: none;" />

In script file:
  // invoked when sending ajax request
  $(document).ajaxSend(function () {
      $("#loading").show();
  });

  // invoked when sending ajax completed
  $(document).ajaxComplete(function () {
      $("#loading").hide();
  });

Question 10

पुराना धागा, लेकिन मैं आज इस समस्या पर काम करने के बाद से अद्यतन करना चाहता था, मुझे अपनी परियोजना में jquery नहीं मिली, इसलिए मैंने इसे सादे पुराने जावास्क्रिप्ट तरीके से किया, मुझे स्क्रीन पर सामग्री को ब्लॉक करने की भी आवश्यकता थी ताकि मेरे xhtml में

    <img id="loading" src="#{request.contextPath}/images/spinner.gif" style="display: none;"/>

मेरी जावास्क्रिप्ट में

    document.getElementsByClassName('myclass').style.opacity = '0.7'
    document.getElementById('loading').style.display = "block";