लोडिंग के बजाय जावास्क्रिप्ट। gif

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

मैं वेब डिज़ाइन में ग्राफिक्स के उपयोग का समर्थक नहीं हूं, क्योंकि ग्राफिक्स डाउनलोड करने से सर्वर पर अतिरिक्त भार पैदा होता है, पेज खोलने के लिए प्रतीक्षा समय बढ़ जाता है, और मुख्य रूप से क्योंकि इस ग्राफिक्स को मुख्य प्रक्रिया - प्रोग्रामिंग और लेआउट से विशेष रूप से विचलित करना चाहिए।

एक और नए प्रोजेक्ट के बाद, मैंने सोचा कि क्या लोडिंग.गिफ़ इस साइट पर दिखेगी। चूंकि साइट का डिज़ाइन पूरी तरह से मूल है, इसलिए विवरण भी अलग दिखना चाहिए। मैं फ्लैश में नहीं जाना चाहता था। इसके अलावा, जब मैंने फ्लैश में जिफ-एनीमेशन बनाने की कोशिश की, तो किसी कारण से परिणाम बहुत कम गुणवत्ता का हो गया, इसलिए पहले मैंने सिर्फ लोडिंग का उपयोग किया। VKontakte या फेसबुक से।

इस बार मुझे यह विचार आया: इस तस्वीर को कोड के साथ बदलें। कई विकल्प यहां देखे गए हैं। पहला डोम एनीमेशन है। दूसरा कैनवास एनीमेशन है।

मैंने पहले विकल्प का उपयोग करने और परीक्षण के लिए फेसबुक से loading.gif के समान कुछ करने का फैसला किया। यहाँ क्या हुआ है।

सीएसएस:

.loading div { opacity: 0; border: 1px #a6a6a6 solid; box-shadow: inset 0px 0px 3px #000; -moz-box-shadow: inset 0px 0px 3px #000; -webkit-box-shadow: inset 0px 0px 3px #000; background-color: #ebebeb; float:left; } 

जावास्क्रिप्ट (jquery द्वारा प्रयुक्त):

 function loadingShow(obj, time){ obj.animate({'opacity': 1}, time, function(){ loadingHide(obj, time); }); } function loadingHide(obj, time){ obj.animate({'opacity': 0.3}, time, function(){ setTimeout(function(){ loadingShow(obj, time); }, 500); }); } setInterval(function(){ $('.loading').each(function(){ var obj = $(this); if(obj.children('div').length>0) return; var w = 30; var h = 50; obj.append('<div style="width:'+w+'px;height:'+h+'px"></div>'); obj.append('<div style="width:'+w+'px;height:'+h+'px"></div>'); obj.append('<div style="width:'+w+'px;height:'+h+'px"></div>'); obj.append('<div style="clear:both"></div>'); var i = 0; var time = 100; obj.children('div').each(function(){ i++; var obj = $(this); setTimeout(function(){ loadingShow(obj, time*2); }, i*time); }); }); }, 100); 

एनीमेशन जोड़ने के लिए, आपको कुछ करने की आवश्यकता है:

 dom_object.append('<div class="loading"></div>'); 

इस दृष्टिकोण के लाभ:

1. ग्राफिक्स बनाने की जरूरत नहीं
2. सर्वर लोड कम करता है, पेज लोडिंग गति बढ़ाता है
3. एनीमेशन को प्रोग्रामेटिक रूप से आसानी से समायोजित किया जा सकता है।

इस दृष्टिकोण के विपक्ष:

1. ब्राउज़र में टैब के बीच स्विच करने पर, टाइमिंग विफल हो जाती है

केवल Google Chrome में परीक्षण किया गया है। संकेतित माइनस भी महत्वपूर्ण नहीं है, क्योंकि यह एनीमेशन आमतौर पर बहुत कम समय के लिए दिखाया जाता है - आपके पास टैब के साथ स्विच करने का समय भी नहीं है।