$ .Ajax का प्रदर्शन करते समय लोडिंग छवि दिखाएं

Question

मैं सिर्फ यह सोच रहा हूं कि एक छवि कैसे दिखाई जाए जो इंगित करती है कि async अनुरोध चल रहा है। मैं एक async अनुरोध करने के लिए निम्न कोड का उपयोग करता हूं:

$.ajax({
  url: uri,
  cache: false,
  success: function(html){
    $('.info').append(html);
  }
});

कोई विचार?

Answer 1

आप निश्चित रूप से अनुरोध करने से पहले इसे दिखा सकते हैं, और इसे पूरा होने के बाद इसे छिपा सकते हैं:

$('#loading-image').show();
$.ajax({
      url: uri,
      cache: false,
      success: function(html){
        $('.info').append(html);
      },
      complete: function(){
        $('#loading-image').hide();
      }
    });

मैं आमतौर पर वैश्विक ajaxStart और ajaxStop घटनाओं से इसे बांधने के अधिक सामान्य समाधान को पसंद करता हूं, इस तरह यह सभी ajax घटनाओं के लिए दिखाता है:

$('#loading-image').bind('ajaxStart', function(){
    $(this).show();
}).bind('ajaxStop', function(){
    $(this).hide();
});

Comments

JQuery 1.9 शुरू करने के लिए, AJAX घटनाओं को documentकेवल संलग्न किया जाना चाहिए । देखें stackoverflow.com/questions/2275342/…

— Simone

Answer 2

Ajax ऑब्जेक्ट का पहले से उपयोग करें और पूर्ण कार्य करें। बेहतर है कि पहले से अंदर से जिफ दिखाओ ताकि एक ही वस्तु में सारा व्यवहार समा जाए। सफलता फ़ंक्शन का उपयोग करके जिफ़ को छिपाने के बारे में सावधान रहें। यदि अनुरोध विफल हो जाता है, तो आप शायद gif को छिपाना चाहेंगे। ऐसा करने के लिए पूर्ण फ़ंक्शन का उपयोग करें। यह इस तरह दिखेगा:

$.ajax({
    url: uri,
    cache: false,
    beforeSend: function(){
        $('#image').show();
    },
    complete: function(){
        $('#image').hide();
    },
    success: function(html){
       $('.info').append(html);
    }
});

Comments

सरल स्निपेट के लिए धन्यवाद। समय की बचत @jEremyB

— DEV

यह बहुत उपयोगी और सार्वभौमिक तो अनुमोदित समाधान है। धन्यवाद।

— एरिक रेबेल

Answer 3

HTML कोड :

<div class="ajax-loader">
  <img src="{{ url('guest/images/ajax-loader.gif') }}" class="img-responsive" />
</div>

सीएसएस कोड:

.ajax-loader {
  visibility: hidden;
  background-color: rgba(255,255,255,0.7);
  position: absolute;
  z-index: +100 !important;
  width: 100%;
  height:100%;
}

.ajax-loader img {
  position: relative;
  top:50%;
  left:50%;
}

जैकी कोड:

$.ajax({
  type:'POST',
  beforeSend: function(){
    $('.ajax-loader').css("visibility", "visible");
  },
  url:'/quantityPlus',
  data: {
   'productId':p1,
   'quantity':p2,
   'productPrice':p3},
   success:function(data){
     $('#'+p1+'value').text(data.newProductQuantity);
     $('#'+p1+'amount').text("₹ "+data.productAmount);
     $('#totalUnits').text(data.newNoOfUnits);
     $('#totalAmount').text("₹ "+data.newTotalAmount);
  },
  complete: function(){
    $('.ajax-loader').css("visibility", "hidden");
  }
});

}

Answer 4

"छवि" लोग आमतौर पर एक अजाक्स कॉल के दौरान दिखाते हैं एक एनिमेटेड जिफ है। चूंकि अजाक्स अनुरोध के प्रतिशत को पूरा करने का कोई तरीका नहीं है, इसलिए जिन एनिमेटेड जिफों का उपयोग किया गया है, वे अनिश्चित स्पिनर हैं। यह सिर्फ एक छवि है जो विभिन्न आकारों के हलकों की एक गेंद की तरह बार-बार दोहराती है। अपने स्वयं के कस्टम अनिश्चित स्पिनर बनाने के लिए एक अच्छी साइट http://ajaxload.info/ है

Answer 5

मुझे लगता है कि यह बेहतर हो सकता है यदि आपके पास $ .ajax कॉल हो

$(document).ajaxSend(function(){
    $(AnyElementYouWantToShowOnAjaxSend).fadeIn(250);
});
$(document).ajaxComplete(function(){
    $(AnyElementYouWantToShowOnAjaxSend).fadeOut(250);
});

ध्यान दें:

यदि आप CSS का उपयोग करते हैं। जब आप अजाक्स को अपने बैक-एंड कोड से डेटा ला रहे हैं, तब आप जो दिखाना चाहते हैं वह तत्व इस तरह होना चाहिए।

AnyElementYouWantToShowOnAjaxSend {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh; /* to make it responsive */
    width: 100vw; /* to make it responsive */
    overflow: hidden; /*to remove scrollbars */
    z-index: 99999; /*to make it appear on topmost part of the page */
    display: none; /*to make it visible only on fadeIn() function */
}

Comments

यह स्वीकृत उत्तर होना चाहिए क्योंकि यह सामान्य है!

— रोटिमी

Answer 6

मुझे हमेशा BlockUIप्लगइन पसंद आया है : http://jquery.malsup.com/block/

यह आपको पेज के कुछ तत्वों या पूरे पेज को ब्लॉक करने की अनुमति देता है, जबकि अजाक्स अनुरोध चल रहा है।

Answer 7

आपके कॉल से पहले या तो लोडिंग इमेज को डिव / स्पैन में कहीं डालें और फिर सक्सेस फंक्शन पर उस इमेज को हटा दें। वैकल्पिक रूप से आप लोडिंग जैसी सीएसएस क्लास सेट कर सकते हैं जो इस तरह दिख सकती है

.loading
{
    width: 16px;
    height: 16px;
    background:transparent url('loading.gif') no-repeat 0 0;
    font-size: 0px;
    display: inline-block;
}

और फिर इस वर्ग को एक स्पैन / डिव में असाइन करें और इसे सफलता फ़ंक्शन में साफ़ करें

Answer 8

कुछ इस तरह:

$('#image').show();
$.ajax({
    url: uri,
    cache: false,
    success: function(html){
       $('.info').append(html);
       $('#image').hide();
    }
});

Answer 9

आप ajax start और complete event जोड़ सकते हैं, यह तब काम आता है जब आप बटन इवेंट पर क्लिक करते हैं

 $(document).bind("ajaxSend", function () {
            $(":button").html('<i class="fa fa-spinner fa-spin"></i> Loading');
            $(":button").attr('disabled', 'disabled');
        }).bind("ajaxComplete", function () {
            $(":button").html('<i class="fa fa-check"></i> Show');
            $(":button").removeAttr('disabled', 'disabled');
        });

Answer 10

1. उदाहरण के लिए id = example_load वाले एक तत्व के लिए एक लोड तत्व बनाएँ।
2. शैली = "प्रदर्शन: कोई नहीं" जोड़कर इसे डिफ़ॉल्ट रूप से छिपाएं।

3. अब इसे अपने अजाक्स के ठीक ऊपर jquery शो एलिमेंट फ़ंक्शन का उपयोग करके दिखाएं।

   $('#example_load').show(); $.ajax({ type: "POST", data: {}, url: '/url', success: function(){ // Now hide the load element $('#example_load').hide(); } });

Answer 11

**strong text**Set the Time out to the ajax calls
function testing(){
    
    $("#load").css("display", "block");
    setTimeout(function(){
    $.ajax({
             type: "GET",

          
             url:testing.com,
            
             async: false,
             
             success : function(response){
           
             alert("connection established");

              
            },
            complete: function(){
            alert("sended");
            $("#load").css("display", "none");
         
           },
            error: function(jqXHR, exception) {
                       alert("Write error Message Here");
                  },


       });
     },5000);


  }

  .loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
  }
  
  /* Safari */
  @-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

<div id="load" style="display: none" class="loader"></div>
<input type="button"  onclick="testing()"  value="SUBMIT" >