छवि अपलोड प्रबंधन

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

प्रत्येक छवि के लिए एक कंटेनर का उपयोग करना

एक सरल तरीका जिसे आप साइट पर किसी भी छवि पर लागू कर सकते हैं। यह इस तथ्य में समाहित है कि प्रत्येक चित्र एक DIV में लिपटा हुआ है, जो लाइन-बाय-लाइन लोडिंग को रोकता है:

<div class="img_wrapper"> <img src="comicbookguy.jpg" alt=""/> </div> 

कंटेनर का उपयोग करके, आप तस्वीर के पहलू अनुपात को नियंत्रित कर सकते हैं, साथ ही डाउनलोड संकेतक का उपयोग कर सकते हैं, जो कि छवियों के भारी होने पर बहुत सुविधाजनक है।

उदाहरण के लिए, पहलू अनुपात को 4: 3 पर सेट करने के लिए, आप निम्नलिखित सीएसएस का उपयोग कर सकते हैं:

 .img_wrapper{ position: relative; padding-top: 75%; overflow: hidden; } .img_wrapper img{ position: absolute; top: 0; width: 100%; opacity: 0; } 

पूर्ण लोडिंग के बाद ही छवि को ब्राउज़र में प्रदर्शित किया जा सकता है, आपको छवि के लिए ऑनलोड घटना को जोड़ना होगा और जावास्क्रिप्ट का उपयोग करना होगा जो घटना को संभाल लेगा:

 <div> <img src="comicbookguy.jpg" alt="" onload="imgLoaded(this)"/> </div> 

 function imgLoaded(img){ var $img = $(img); $img.parent().addClass('loaded'); }; 

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

 .img_wrapper.loaded img{ opacity: 1; } 

तस्वीर की एक चिकनी उपस्थिति के प्रभाव के लिए, आप CSS3 संक्रमण का उपयोग कर सकते हैं:

 .img_wrapper img{ position: absolute; top: 0; width: 100%; opacity: 0; -webkit-transition: opacity 150ms; -moz-transition: opacity 150ms; -ms-transition: opacity 150ms; transition: opacity 150ms; } 

इस विधि का एक जीवंत उदाहरण कोडपेन पर देखा जा सकता है।

कई छवियों के लिए एक कंटेनर का उपयोग करना

पिछली विधि व्यक्तिगत छवियों के लिए अच्छी तरह से अनुकूल है, लेकिन क्या होगा यदि पृष्ठ पर बहुत सारे हैं, उदाहरण के लिए एक फोटो गैलरी या एक स्लाइडर? एक बार में सब कुछ अपलोड करना अव्यावहारिक है - चित्र बहुत अधिक वजन कर सकते हैं। इस समस्या को हल करने के लिए, आप जावास्क्रिप्ट को केवल उन छवियों को लोड करने के लिए बाध्य कर सकते हैं जिनकी आपको एक निश्चित समय पर जरूरत है। उदाहरण स्लाइड शो के लिए HTML मार्कअप:

 <div id="Slideshow"> <img src="slide_1.jpg" alt="" onload="slideLoaded(this)" /> <img src="slide_2.jpg" alt="" onload="slideLoaded(this)" /> <img src="slide_3.jpg" alt="" onload="slideLoaded(this)" /> </div> 

प्रक्रिया को नियंत्रित करने के लिए हम स्लाइडवैलिड () फ़ंक्शन का उपयोग करते हैं:

 function slideLoaded(img){ var $img = $(img), $slideWrapper = $img.parent(), total = $slideWrapper.find('img').length, percentLoaded = null; $img.addClass('loaded'); var loaded = $slideWrapper.find('.loaded').length; if(loaded == total){ percentLoaded = 100; // INSTANTIATE PLUGIN $slideWrapper.easyFader(); } else { // TRACK PROGRESS percentLoaded = loaded/total * 100; }; }; 

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

कैशिंग

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

 <script> var heroArray = [ '/uploads/hero_about.jpg', '/uploads/hero_history.jpg', '/uploads/hero_contact.jpg', '/uploads/hero_services.jpg' ] </script> 

जब कोई आगंतुक साइट पर जाता है, तो मुख्य पृष्ठ लोड करने के बाद, कैश में चित्र लोड होने लगते हैं। वर्तमान सामग्री के प्रदर्शन में हस्तक्षेप न करने के लिए कैशिंग के लिए, आपको विंडो लोड ईवेंट में जावास्क्रिप्ट कार्यक्षमता जोड़ने की आवश्यकता है:

 function preCacheHeros(){ $.each(heroArray, function(){ var img = new Image(); img.src = this; }); }; $(window).load(function(){ preCacheHeros(); }); 

यह विधि साइट की प्रयोज्य में सुधार करती है, लेकिन सर्वर पर एक अतिरिक्त भार देती है। ऐसी कार्यक्षमता का परिचय देते समय यह ध्यान में रखना चाहिए। इसके अलावा, साइट पर आगंतुकों के संभावित रास्तों और उन पृष्ठों पर स्थित कैशे छवियों को ध्यान में रखना आवश्यक है, जो उपयोगकर्ता के जाने की सबसे अधिक संभावना है। किसी साइट पर ऐसे रास्तों को समझने के लिए, ट्रैफ़िक आँकड़ों का विश्लेषण करना आवश्यक है।

इवेंट डाउनलोड करें

विधि यह है कि छवियों को एक निश्चित घटना के बाद लोड किया जाना शुरू होता है। यह उत्पादकता बढ़ाता है और उपयोगकर्ता यातायात बचाता है। HTML मार्कअप:

 <div class="img_wrapper lazy_load"> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="comicbookguy.jpg" alt="Comic Book Guy" /> </div> 

यह ध्यान देने योग्य है कि URL छवि डेटा-src में निर्दिष्ट है, और src में नहीं। यह आवश्यक है ताकि ब्राउज़र छवि को तुरंत डाउनलोड न करे। इसके बजाय, बेस 64 में निर्दिष्ट जीआईएफ में पारदर्शी पिक्सेल को src में लोड किया गया है, जो सर्वर पर कॉल की संख्या को कम करता है।

यह केवल वांछित घटना के लिए src मूल्य को डेटा-src में बदलने के लिए बनी हुई है। जावास्क्रिप्ट आपको छवियों को धीरे-धीरे लोड करने की अनुमति देता है:

 function lazyLoad(){ var $images = $('.lazy_load'); $images.each(function(){ var $img = $(this), src = $img.attr('data-src'); $img .on('load',imgLoaded($img[0])) .attr('src',src); }); }; $(window).load(function(){ lazyLoad(); }; 

निष्कर्ष

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