एसिंक्रोनस अनुरोधों के दौरान लोडिंग छवि प्रदर्शित करना

$.ajax का उपयोग करके एसिंक्रोनस अनुरोध निष्पादित करने से दृश्य संकेत की कमी के कारण भ्रम पैदा हो सकता है सतत प्रक्रिया। यह आलेख ऐसे अनुरोधों के दौरान एक लोडिंग छवि दिखाने के लिए तकनीकों की खोज करता है।

शुरू करने के लिए, प्रदान किया गया कोड स्निपेट एक यूआरएल के लिए एक अतुल्यकालिक अनुरोध करता है और प्राप्त HTML को 'जानकारी' वर्ग के साथ एक तत्व में जोड़ता है। लोडिंग छवि प्रदर्शित करने के लिए, 'लोडिंग-इमेज' की 'आईडी' वाले एक छवि तत्व का उपयोग किया जा सकता है।

एक तरीका अनुरोध करने से पहले छवि दिखाना और पूरा होने के बाद इसे छिपाना है:

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

एक अधिक सामान्य दृष्टिकोण लोडिंग छवि को वैश्विक AjaxStart और AjaxStop ईवेंट से बांधना है। इस तरह, छवि सभी अतुल्यकालिक अनुरोधों के लिए दिखाई देगी:

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

ये तकनीकें चल रहे एसिंक्रोनस अनुरोध का उपयोगकर्ता के अनुकूल संकेत प्रदान करती हैं, जिससे उपयोगकर्ता अनुभव बढ़ता है।