एकल पृष्ठ वेबसाइट में jquery AJAX का उपयोग कर पृष्ठों को लोड करते समय प्रोग्रेसबार दिखाएं

Question

मेरे पास शीर्ष पर नेविगेशन बार और एक रैपर बॉडी वाला मूल पृष्ठ है।

जब भी कोई उपयोगकर्ता नेविगेशन लिंक पर क्लिक करता है तो यह पृष्ठ सामग्री को wrapper div में लोड करने के लिए .load का उपयोग करता है। .load से वापसी मान के

$(this).ajaxStart(function(){$('.progressbar .bar').css('width','5%');$('.progressbar').fadeIn();}); 
$(this).ajaxEnd(function(){$('progressbar').hide();}); 

$('.ajaxspl').on('click',function(e){ 
    e.preventDefault(); 

    var url=$(this).data('url'), 
     wrap=$('body #wrap'); 

    //clean the wrapper 
    wrap.slideUp().html(''); 

    //load page into wrapper 
    wrap.load(url,function(){wrap.slideDown();}); 
}); 

उदाहरण:

<div> 
...content 
</div> 
<script>$('.progressbar .bar').css('width','30%');</script> 
<link href="/assets/css/datepicker.css" rel="stylesheet" /> 
<script>$('.progressbar .bar').css('width','60%');</script> 
<link href="/assets/css/main.css" rel="stylesheet" /> 
<script>$('.progressbar .bar').css('width','90%');</script> 
<script>//blah blah</script> 

आप देख सकते हैं, मैं एक बूटस्ट्रैप प्रगति बार है कि मैं ajaxstart() पर दिखाने के लिए है, और पेज है कि मैं फोन पर मैं की है कि मूल्य को संशोधित प्रत्येक आइटम लोड होने के बाद प्रगति पट्टी।

यह फ़ायरफ़ॉक्स पर अच्छी तरह से काम करता है और पेज लोड होने की प्रतीक्षा करते समय मैं प्रगति पट्टी देख सकता हूं, लेकिन यह क्रोम या आईई पर काम नहीं करता है।

क्या ऐसा करने का कोई बेहतर तरीका है? क्या मैं इसे सही तरीके से कर रहा हूं या ऐसा करने के लिए कोई और तरीका है?

उदाहरण के लिए, $.ajax पृष्ठ केबी में पृष्ठ आकार प्राप्त करना और डेटा प्राप्त होने के कारण फ्लाई पर प्रगति पट्टी अपडेट करें?

मैं जीमेल लोड होने पर लोडिंग पेज के समान कुछ उत्पन्न करने की कोशिश कर रहा हूं।

Answer 1

मुझे this page का उल्लेख करने की अनुमति दें, यह कैसे आप (these browsers में जो केवल काम करता है पुराने ब्राउज़र आप बस एक ही आधार आप वर्तमान में उपयोग कर रहे हैं पर निर्भर है में,) XHR ऑब्जेक्ट में एक progress event श्रोता जोड़ सकते हैं में desribes jQuery।

$.ajax({ 
    xhr: function() 
    { 
    var xhr = new window.XMLHttpRequest(); 
    //Upload progress 
    xhr.upload.addEventListener("progress", function(evt){ 
     if (evt.lengthComputable) { 
     var percentComplete = evt.loaded/evt.total; 
     //Do something with upload progress 
     console.log(percentComplete); 
     } 
    }, false); 
    //Download progress 
    xhr.addEventListener("progress", function(evt){ 
     if (evt.lengthComputable) { 
     var percentComplete = evt.loaded/evt.total; 
     //Do something with download progress 
     console.log(percentComplete); 
     } 
    }, false); 
    return xhr; 
    }, 
    type: 'POST', 
    url: "/", 
    data: {}, 
    success: function(data){ 
    //Do something success-ish 
    } 
}); 

मुझे कहने के लिए ही इस के लिए overkill का एक बहुत है कि अनुमति देते हैं:

संदर्भ के लिए मैं प्रासंगिक कोड के नीचे की नकल की है (आप केवल शायद की डाउनलोड प्रगति 'भाग में रुचि होगी) एक पृष्ठ की वेबसाइट और केवल बड़ी फ़ाइलों के लिए वास्तव में उपयोगी हो जाती है। इसके अतिरिक्त छवियों और इसी तरह के मीडिया को इस तरह से संभाला नहीं जाता है और आपको ऐसी प्रणाली को सही बनाने के लिए छवियों की लोडिंग (या इसे स्वयं AJAX के माध्यम से करें) की निगरानी करने की आवश्यकता होगी। (Upvoted) http://jsfiddle.net/vg389mnv/1/

Answer 2

ऊपर जवाब सही है:

यहाँ एक JSFiddle कार्रवाई में यह दिखा है। एक कस्टम XHR अनुरोध अच्छी तरह से काम करता है, मैं (वास्तविक प्रगति देखने के लिए और एक बड़ा फ़ाइल), साथ ही इसे यहाँ कॉपी कर सकते हैं अपने कोड के साथ यह परीक्षण किया:

$('.ajaxspl').on('click',function(e){ 
    e.preventDefault(); 

    var url=$(this).data('url'), wrap=$('body #wrap'); 

    //clean the wrapper 
    wrap.slideUp().html(''); 

    //load page into wrapper 
    console.log('starting ajax request'); 
    $.ajax({ 
     xhr: function() { 
      var xhr = new window.XMLHttpRequest(); 
      xhr.addEventListener('progress', function(e) { 
       if (e.lengthComputable) { 
        $('.progressbar .bar').css('width', '' + (100 * e.loaded/e.total) + '%'); 
       } 
      }); 
      return xhr; 
     }, 
     type: 'POST', 
     url: url, 
     data: {}, 
     complete: function(response, status, xhr) { 
      console.log(response) 
      wrap.html(response.responseText); 
      wrap.slideDown(); 
     } 
    }); 

});