$ .ajax के दौरान लोडिंग छवि दिखाएं

Question

मैं सोच रहा हूं कि एक छवि कैसे दिखाना है जो इंगित करता है कि 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 घटनाओं के लिए दिखाता है:

यह जबकि एक ajax अनुरोध चल रहा है आप एक पृष्ठ, या पूरे पृष्ठ के खास घटक ब्लॉक करने के लिए अनुमति देता है:

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

Answer 2

कुछ इस तरह: अपने कॉल करने से पहले

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

Answer 3

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

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

कैसा लग सकता है और फिर अंतराल/div करने के लिए इस वर्ग निर्दिष्ट करेंगे और सफलता समारोह

Answer 4

मैं हमेशा BlockUI प्लगइन को पसंद किया है।

Answer 5

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

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

Answer 6

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

Answer 7

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

jQuery कोड:

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

}