इमेज का लेज़ी लोडिंग
इमेज को केवल दिखाई देने पर लोड कीजिए।
इमेज का लेज़ी लोडिंग, CoddyKit पर JavaScript Academy का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह JavaScript Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। JavaScript Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
आवश्यकता पड़ने पर लोड करने का विचार
आवश्यकता पड़ने पर लोड करने की प्रक्रिया तब तक चित्रों का डाउनलोड टालती है, जब तक वे स्क्रॉल करके दिखाई देने के करीब न आ जाएँ। इससे बैंडविड्थ बचती है और शुरुआती पेज लोड तेज़ होता है, खासकर लंबे और बहुत सारे चित्रों वाले पेजों पर।
वास्तविक URL को संग्रहीत करना
युक्ति यह है: शुरुआत में वास्तविक चित्र URL को src में न रखें। उसे data-src विशेषता में संग्रहीत करें, ताकि ब्राउज़र उसे अभी डाउनलोड न करे।
// Markup pattern:
// <img data-src="photo-large.jpg" alt="Scenery">
// The browser will not fetch anything until we set src.आवश्यकता पड़ने पर लोड होने वाले चित्र चुनना
वे सभी चित्र एकत्र करें जिन्हें आवश्यकता पड़ने पर लोड करना है। एक सामान्य तरीका यह है कि उनके लिए एक साझा वर्ग रखें या उनमें data-src मौजूद हो।
const lazyImages = document.querySelectorAll('img[data-src]');
console.log('found', lazyImages.length, 'lazy images');ऑब्ज़र्वर बनाना
ऐसा observer बनाएँ जिसका कॉलबैक चित्र के इंटरसेक्ट होते ही वास्तविक चित्र लोड करे। चित्र के दिखाई देने से थोड़ा पहले लोडिंग शुरू करने के लिए rootMargin का उपयोग करें।
const observer = new IntersectionObserver((entries, obs) => {
// handle entries here
}, { rootMargin: '100px' });इंटरसेक्शन पर लोड करना
जब कोई चित्र इंटरसेक्ट करे, तो उसके data-src को src में कॉपी करें। इसके बाद ब्राउज़र चित्र को डाउनलोड करके दिखाता है।
const observer = new IntersectionObserver((entries, obs) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src; // triggers the download
}
});
}, { rootMargin: '100px' });लोड होने के बाद निगरानी रोकना
लोड होने के बाद किसी चित्र की दोबारा निगरानी करने की आवश्यकता नहीं होती। संसाधन मुक्त करने और प्रक्रिया को फिर से सक्रिय होने से रोकने के लिए unobserve कॉल करें।
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
obs.unobserve(img); // done watching this one
}निगरानी शुरू करना
हर ऐसे चित्र पर लूप चलाकर उसकी निगरानी शुरू करें। उपयोगकर्ता के स्क्रॉल करने पर बाकी काम observer संभाल लेता है।
lazyImages.forEach(img => observer.observe(img));प्लेसहोल्डर दिखाना
वास्तविक चित्र लोड होने तक एक छोटा धुंधला प्लेसहोल्डर या ठोस रंग दिखाकर सहज अनुभव दें, फिर चित्र की load घटना पर उसे धीरे-धीरे दिखाई दें।
img.addEventListener('load', () => {
img.classList.add('loaded'); // CSS can fade it in
});
img.src = img.dataset.src;मूल loading विशेषता
आधुनिक ब्राउज़र img और iframe पर loading="lazy" के माध्यम से मूल रूप से आवश्यकता पड़ने पर लोड करने की सुविधा भी देते हैं। कस्टम नियंत्रण, ऐनिमेशन या वैकल्पिक व्यवस्था के लिए इंटरसेक्शन ऑब्ज़र्वर अभी भी उपयोगी है।
// Native approach (no JS needed):
// <img src="photo.jpg" loading="lazy" alt="...">
// Observer approach gives more control and effects.data-src की सफ़ाई
लोड होने के बाद आप DOM को व्यवस्थित रखने और बाद के कोड या प्रश्नों में भ्रम से बचने के लिए data-src विशेषता हटा सकते हैं।
img.src = img.dataset.src;
img.removeAttribute('data-src');
obs.unobserve(img);पूरा तरीका
इंटरसेक्शन ऑब्ज़र्वर की मदद से आवश्यकता पड़ने पर लोड करना एक व्यवस्थित और कुशल तरीका है: URL को data-src में संग्रहीत करें, हर चित्र की निगरानी करें, इंटरसेक्शन पर वास्तविक URL डालें, फिर निगरानी रोक दें। इसका परिणाम तेज़ पेज होता है, जो चित्रों को ठीक समय पर लोड करता है।
त्वरित जाँच
चित्रों को आवश्यकता पड़ने पर लोड करने के बारे में अपनी समझ जाँचें।
पुनरावलोकन
आपने चित्रों को आवश्यकता पड़ने पर लोड करना बनाया:
- वास्तविक URL को
data-srcमें संग्रहीत करें। - इंटरसेक्शन ऑब्ज़र्वर से हर चित्र की निगरानी करें।
- इंटरसेक्शन पर
data-srcकोsrcमें कॉपी करें औरunobserveकॉल करें। - दृश्य में आने से ठीक पहले प्रीलोड करने के लिए
rootMarginका उपयोग करें। - मूल
loading="lazy"एक सरल विकल्प है।
अब हम अनंत स्क्रॉल लागू करेंगे।
एआई शिक्षक के साथ JavaScript सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 59
- पाठ
- 200
अक्सर पूछे जाने वाले प्रश्न
क्या “इमेज का लेज़ी लोडिंग” पाठ निःशुल्क है?
हाँ — JavaScript Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “इमेज का लेज़ी लोडिंग” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। JavaScript Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“इमेज का लेज़ी लोडिंग” में मैं क्या सीखूँगा?
इमेज को केवल दिखाई देने पर लोड कीजिए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ JavaScript Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या JavaScript Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर JavaScript Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।
“इमेज का लेज़ी लोडिंग” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस JavaScript Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर JavaScript Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- तत्व की दृश्यता देखना
- इमेज का लेज़ी लोडिंग
- अनंत स्क्रॉलिंग
- स्क्रॉल से शुरू होने वाले ऐनिमेशन