एचटीएमएल 5

Question

में प्रगति डाउनलोड करें यदि मेरे पास 5 जावास्क्रिप्ट फ़ाइलें हैं और सीएसएस के साथ अलग-अलग आकार और समान हैं, तो क्या स्क्रिप्ट/सीएसएस डाउनलोड होने पर "वास्तविक समय" प्रगति पट्टी दिखाना संभव है?

मुझे पता है कि यह HTML4 में संभव नहीं हो सकता है और फ्लैश/सिल्वरलाइट की आवश्यकता होगी। लेकिन क्या मैं इसे HTML5 में प्राप्त कर सकता हूं? यदि हां, तो मैं यह कैसे करूँगा?

मैं "डाउनलोडिंग" जैसे टेक्स्ट दिखाना चाहता हूं और प्रत्येक स्क्रिप्ट/सीएसएस वास्तविक समय डाउनलोड हो जाता है, डाउनलोड करने के प्रत्येक अक्षर को भरना शुरू होना चाहिए। मैं किसी भी कोड के लिए नहीं पूछ रहा हूँ। बस एक उच्च स्तरीय अवधारणा चाहते हैं कि यह कैसे संभव है।

धन्यवाद।

Answer 1

यहां मैं क्या करने में सक्षम हूं; एचटीएमएल 5 में <progress> तत्व है जिसका उपयोग आप कर सकते हैं। बुरी खबर यह है कि इस तत्व के लिए समर्थन उतना अच्छा नहीं है जितना हो सकता है। यहां समर्थन चार्ट देखें: http://caniuse.com/#search=progress सफारी 5 और नीचे या आईई 9 और नीचे कोई समर्थन नहीं है। आंशिक समर्थन आईई 10 और फ़ायरफ़ॉक्स के किसी भी प्रासंगिक संस्करण में है। आप और अधिक समर्थन की जरूरत है इस तरह का polyfil कोशिश: http://lea.verou.me/polyfills/progress/

आप <progress> तत्व इस्तेमाल करते हैं तो यह इस प्रकार शैली के बारे में एक कड़ी है: http://www.useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth/

अब यह काम करने के बारे में चाल के लिए, आप उस फाइल के फ़ाइल आकार को जानने की आवश्यकता है जिसे आप डाउनलोड करेंगे और डाउनलोड किए गए बाइट्स की संख्या। चूंकि फाइलें डाउनलोड की जा रही हैं, आपको हेडर जानकारी प्राप्त करनी होगी जो आपको बताती है कि कितने बाइट स्थानांतरित किए जाते हैं। आप यहां jQuery के साथ ऐसा करने का नमूना देख सकते हैं: http://markmail.org/message/kmrpk7w3h56tidxs#query:jquery%20ajax%20download%20progress+page:1+mid:kmrpk7w3h56tidxs+state:results

ध्यान दें कि यह विधि IE के साथ काम नहीं करेगी। आईई एक्सएचआर ऑब्जेक्ट के हेडर डेटा का पर्दाफाश नहीं करता है।

इस बिंदु पर कुल फ़ाइल आकार के <progress> तत्व की max विशेषता सेट और setTimeout नमूना का उपयोग कर, <progress> तत्व की value विशेषता को अपडेट।

यह सब जानना, शायद अंतर्निहित फ्लैश फ़ॉलबैक के साथ किसी प्रकार का पैकेज समाधान ढूंढना बहुत आसान हो सकता है, और बेहतर समर्थन हो सकता है। किसी और के पास कोई विचार है?

शुभकामनाएं।