2011-03-25 14 views
6

लोड करने के लिए एक प्रगति व्हील दिखा रहा है, मुझे दिखाने के लिए एक प्रगति पहिया की आवश्यकता है जबकि उपयोगकर्ता प्रतीक्षा करते समय बहुत सारे डेटाबेस और तृतीय पक्ष कर्ल क्वेरी किए जा रहे हैं।पेज लोड

क्या प्रगति व्हील तुरंत स्वयं दिखाना चाहिए, या पृष्ठ टेम्पलेट (लेकिन सामग्री नहीं) में लोड होने के बाद मुझे इसे दिखाना चाहिए?

क्या मुझे पृष्ठ की HTML/जावास्क्रिप्ट लोड होने तक, या जब PHP लोड हो रहा है, तब तक मुझे प्रगति चक्र दिखाना चाहिए?

यदि आप कच्चे कोड में दिखा सकते हैं कि अधिकांश लोग यह कैसे करते हैं, तो यह बहुत अच्छा होगा। मैं jQuery का उपयोग कर रहा हूं और यह एक PHP साइट है।

उत्तर

3

प्रगति पट्टी दिखाएं, PHP प्रतिक्रिया (लौटा मूल्य HTML हो सकता है) जावास्क्रिप्ट में लोड नहीं होता है।

"मैं एक प्रगति पहिया जब तक पृष्ठ का HTML/जावास्क्रिप्ट लोड हो रहा है किया जाता है, या जब पीएचपी लोड हो रहा है किया जाता है दिखाने चाहिए?"

हाँ इस दृष्टिकोण को

एक बार लोड हो रहा है पूरा हो गया है, लोड हो रहा है jQuery का उपयोग कर छिपाने के लिए और कंटेनर वर्ग के लिए पर सामग्री रखते हैं।

<div class="loading"> 
</div> 
<div id="container"> 
</div> 



$('.loading') 
    .hide() // hide it initially 
    .ajaxStart(function() { 
     $(this).show(); 
    }) 
    .ajaxStop(function() { 
     $(this).hide(); 
    }); 
+0

कौन सा एक? जब PHP किया जाता है या जब HTML/जावास्क्रिप्ट प्रतिपादन किया जाता है? – babonk

+0

प्रगति पट्टी दिखाएं, PHP प्रतिक्रिया (लौटा मूल्य) जावास्क्रिप्ट में लोड नहीं किया गया है। –

2

यह एक बहुत आम तकनीक है और इस प्रक्रिया को काफी मानक है। जब आप अनुरोध करना चाहते हैं तो आप ग्राफिक को केवल तभी दिखाना चाहेंगे। इसका मतलब है कि आपके सीएसएस में कोई भी प्रदर्शित करने के लिए ग्राफ़िक सेट करना। यह compatiblity और percieved प्रदर्शन कारणों के लिए जावास्क्रिप्ट का उपयोग करने से काफी बेहतर है।

आप यहां देख सकते हैं कि मैंने एक लोडिंग ग्राफिक बनाया है, जो jQuery में जोड़ा गया है, और एक मनमानी क्लिक पर होने के लिए एसिंक घटना को बाध्य करता है। ग्राफ़िक कनेक्शन से पहले दिखाया गया है और अनुरोध पूरा होने पर छुपाया गया है। प्रतिक्रिया त्रुटियों के मामले में आप पूर्ण उपयोग करते हैं।

<head> <style> .slider { display: none; }</style> </head> 
<body> 
    <div class="slider"><img src="someslidergraphic.gif"></div> 

    <script src="http://code.jquery.com/jquery.js"></script> 
    <script> 
    jQuery(function($) { 
     // The animation slider cached for readability/performance   
     var slider = $(".slider"); 

     // Arbitrary event  
     $("body").bind('click', function() { 
     // Show graphic before ajax 
     slider.show(); 

     // Fetch content from PHP 
     $.ajax({ 
      // Setings 
      ... 
      'complete': function() { 
      // Hide during complete 
      slider.hide(); 

      // Rest of code after request 
      ... 
      } 
     }); 
    }); 
    </script> 
</body> 
संबंधित मुद्दे