दिलचस्प पोस्ट
सरल एक्सएमएल फ़ाइल से डेटा का निष्कर्षण JQuery में फ़ाइल इनपुट से डेटा प्राप्त करें मैं अपने एज़्यूर फ़ंक्शंस में कैसे NuGet पैकेज का उपयोग कर सकता हूं? स्थैतिक सामग्री की सेवा के लिए सर्विस JavaScript या jQuery का उपयोग करके एक नया टैब में यूआरएल कैसे खोल सकता है? जावा ऐप से एक विंडोज़ सेवा बनाने के लिए कैसे करें जावा के स्क्वायर रूट फ़ंक्शन के लिए मुझे स्रोत कोड कहां मिल सकता है? PHP पार्स / सिंटैक्स त्रुटियाँ; और उन्हें हल करने के लिए कैसे? Is_one के बीच अंतर क्या है? 'सुडो पीप' चलाने के जोखिम क्या हैं? कुकी को 1 घंटे में जावास्क्रिप्ट में समाप्त करने के लिए कैसे सेट करना है? गतिशील कॉलम के साथ MySQL धुरी तालिका क्वेरी तंत्रिका नेटवर्क में ट्रेन, सत्यापन और परीक्षण सेट के बीच क्या अंतर है? हैलो एंड्रॉइड एमुलेटर समस्या सिस्टम। विंडोज या एएसपी.नेट सेवाओं में डालना

Jquery Ajax छवि लोड हो रहा है

मैं नीचे अपने jquery AJAX कोड (यह तब होता है जब jquery अभी भी प्रोसेसिंग) के लिए एक लोडिंग छवि को लागू करना मेरा कोड है:

$.ajax({ type: "GET", url: surl, dataType: "jsonp", cache : false, jsonp : "onJSONPLoad", jsonpCallback: "newarticlescallback", crossDomain: "true", success: function(response) { alert("Success"); }, error: function (xhr, status) { alert('Unknown error ' + status); } }); 

मैं इस कोड में एक लोडिंग छवि को कैसे लागू कर सकता हूं। धन्यवाद

वेब के समाधान से एकत्रित समाधान "Jquery Ajax छवि लोड हो रहा है"

इस तरह से कुछ प्रयास करें:

 <div id="LoadingImage" style="display: none"> <img src="" /> </div> <script> function ajaxCall(){ $("#LoadingImage").show(); $.ajax({ type: "GET", url: surl, dataType: "jsonp", cache : false, jsonp : "onJSONPLoad", jsonpCallback: "newarticlescallback", crossDomain: "true", success: function(response) { $("#LoadingImage").hide(); alert("Success"); }, error: function (xhr, status) { $("#LoadingImage").hide(); alert('Unknown error ' + status); } }); } </script> 

विवरण

आपको ऐसा करना चाहिए jQuery.ajaxStart और jQuery.ajaxStop का उपयोग कर।

  1. अपनी छवि के साथ एक div बनाएँ
  2. इसे jQuery.ajaxStart में दिखाई jQuery.ajaxStart
  3. इसे jQuery.ajaxStop में छुपाएं

नमूना

 <div id="loading" style="display:none">Your Image</div> <script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script> <script> $(function () { var loading = $("#loading"); $(document).ajaxStart(function () { loading.show(); }); $(document).ajaxStop(function () { loading.hide(); }); $("#startAjaxRequest").click(function () { $.ajax({ url: "http://www.google.com", // ... }); }); }); </script> <button id="startAjaxRequest">Start</button> 

अधिक जानकारी

  • jQuery.ajaxStart ()
  • jQuery.ajaxStop ()

थोड़ा देर हो चुकी है लेकिन यदि आप विशेष रूप से एक div का उपयोग नहीं करना चाहते हैं, तो मैं आमतौर पर इसे इस तरह करते हैं …

 var ajax_image = "<img src='/images/Loading.gif' alt='Loading...' />"; $('#ReplaceDiv').html(ajax_image); 

बदलें डीव एक div है जो अजाक्स भी सम्मिलित होता है। तो जब यह आता है, तो छवि को बदल दिया जाएगा

कृपया ध्यान दें कि: ajaxstart / ajaxStop AJAX jsonp अनुरोध के लिए काम नहीं कर रहा है (AJAX जेसन अनुरोध ठीक है)

मैं यह लिखते समय jquery 1.7.2 का उपयोग कर रहा हूं।

यहां संदर्भ में से एक है: http://bugs.jquery.com/ticket/8338