छवियों का आलसी लोडिंग न केवल वेबपेज उम्र के प्रदर्शन में मदद करते हैं, लेकिन यह भी मदद करता है खोज इंजन ऑप्टिमाइज़ेशन के रूप में देखा। आप उपयोग कर सकते हैं jQuery और यहां तक कि Mootools आलसी लोडिंग छवियों के लिए। छवियां केवल तभी दिखाई देंगी जब आप उन्हें स्क्रॉल करेंगे।
यह jQuery टिप पेज लोड करते समय बहुत सारे बाहरी अनुरोधों को कम करता है, अंततः आपके वर्डप्रेस ब्लॉग को तेजी से लोड करने में मदद करता है। इस ट्रिक का उपयोग करते समय, आपको पेज लोडिंग को आसान बनाने के लिए कैशे तकनीक का भी उपयोग करना चाहिए।
विषय-सूची
आलसी लोडिंग क्या है?
आलसी लोडिंग तब होती है जब आप सामग्री को एक बार में डाउनलोड करने के बजाय अपनी आवश्यकता के अनुसार डाउनलोड करते हैं।
आलसी लोडिंग इंटरनेट पर उपयोग की जाने वाली एक अनुकूलन तकनीक है। यह केवल वेब पेज के उस भाग को लोड करता है जिसकी आपको पहले आवश्यकता होती है, और यह किसी अन्य भाग को तब तक लोड नहीं करता जब तक आप उन पर क्लिक नहीं करते। इस तरह, इसे शुरू से अंत तक सारी जानकारी लोड करने की ज़रूरत नहीं है।
आलसी लोडिंग के एक रूप को अनंत स्क्रॉल कहा जाता है। इसका मतलब यह है कि जैसे ही आप पेज को नीचे स्क्रॉल करेंगे, अधिक सामग्री अपने आप लोड हो जाएगी।
आलसी लोडिंग क्यों मायने रखती है?
वेब पेज का विशाल पेलोड छवियों, स्क्रिप्ट, स्टाइलशीट, फोंट और वीडियो से भरा होता है। छवियां लेती हैं 60% से अधिक एक विशिष्ट वेब पेज के आकार का। इनसे छुटकारा पाना संभव नहीं है क्योंकि ये वेबपेज के डिजाइन के लिए महत्वपूर्ण हैं।
बिना किसी अनुकूलन के, आपका वेब ब्राउज़र पृष्ठ को प्रस्तुत करने से पहले सब कुछ डाउनलोड कर लेता है। इससे पेज लोड धीमा हो जाता है।
अपने वेब पेजों को तेजी से लोड करने के लिए आप जो कर सकते हैं, वह करना समझ में आता है। और जब छवियों की बात आती है, तो वेबसाइट के आकार में उनका सबसे बड़ा योगदान होता है।
इसलिए यदि आप उनके साथ शुरू करते हैं, तो यह एक अच्छा विचार है क्योंकि तब आपकी वेबसाइट तेजी से लोड होगी। यह वह जगह है जहां आलसी लोडिंग काम आती है क्योंकि यह केवल एक छवि के उन हिस्सों को डाउनलोड करता है जो किसी भी समय आपके पृष्ठ पर देखे जाते हैं।
JQuery के साथ आलसी लोडिंग कैसे सेट करें?
ऐसे प्लगइन्स हैं जो आपको साधारण चीजें करने की अनुमति देते हैं, लेकिन आप जितने कम प्लगइन्स का उपयोग करेंगे, आपका ब्लॉग उतना ही अधिक कुशल होगा।
कोई फर्क नहीं पड़ता कि आप किस वर्डप्रेस थीम का उपयोग कर रहे हैं, आप बहुत आसानी से आलसी लोडिंग को लागू कर सकते हैं।
यह सिर्फ दो-चरणीय ट्यूटोरियल है, एक jQuery जोड़ने के लिए और दूसरा img टैग को एक वर्ग असाइन करना है, यदि आप अपने वर्डप्रेस ब्लॉग पर विशिष्ट छवियों को आलसी लोड करना चाहते हैं।
यहां jQuery फ़ंक्शन है, जिसे आपको अपनी थीम की स्क्रिप्ट में जोड़ने की आवश्यकता होगी।
/* आलसीलोड.जेएस (सी) लोरेंजो गिउलिआनी * एमआईटी लाइसेंस (http://www.opensource.org/licenses/mit-license.html) */ !function(window){ var $q = function(q, res) { अगर (दस्तावेज़.querySelectorAll) {res = document.querySelectorAll(q); } और { var d=document , a=d.styleSheets[0] || डी.क्रिएट स्टाइलशीट (); ए.एडरूल (क्यू, 'एफ: बी'); for(var l=d.all,b=0,c=[],f=l.length;b= 0 && rect.left >= 0 && rect.top )} var images = new Array() , query = $q('img.lazy'), processScroll = function(){ for (var i = 0; i <images.length; i++) { if (elementInViewport(images[i])) {loadImage(images[i], फ़ंक्शन () {इमेज.स्प्लिस (i, i);}); } }; } ; // Array.prototype.slice.call हमारे प्यारे IE8 के तहत कॉल करने योग्य नहीं है (var i = 0; i < query.length; i++) {images.push(query[i]); }; प्रक्रिया स्क्रॉल (); addEventListener ('स्क्रॉल', प्रोसेसस्क्रॉल); }(यह);
<img src="blank.gif" class="lazy" data-src="/images/full-size.jpg" width="240" height="152"></a>
और यहां बताया गया है कि आप छवियों के आलसी लोडिंग को गतिशील रूप से लागू करने के लिए jQuery फ़ंक्शन को कैसे कॉल कर सकते हैं। आपको प्रत्येक छवि के लिए आलसी वर्ग का उपयोग करने की आवश्यकता है जिसे आप jQuery फ़ंक्शन का उपयोग करके लोड करना चाहते हैं।
निष्कर्ष
Lazyload आपके ब्लॉग या कॉर्पोरेट वेबसाइट के लिए एक अच्छी बात है। यह SEO में मदद करता है और Google इसे देख सकता है। लेकिन, आपको इसके बारे में चिंता करने की ज़रूरत नहीं है क्योंकि वे जानते हैं कि आलसी लोडिंग कैसे काम करती है।
आप एनीमेशन को बदलकर और देरी जोड़कर इसे अपनी इच्छानुसार अनुकूलित भी कर सकते हैं।
हाय,
यह अच्छी जानकारी है और यह बहुत मददगार है। आलसी यह बहुत मददगार है क्योंकि मैं छवियों को दिखाने के लिए विषयों का उपयोग कर रहा था।
अच्छा काम और चलते रहो...!