आलसी लोडिंग और अनंत स्क्रॉल

Intersection Observer API

Detect when elements enter viewport: new IntersectionObserver((entries) => { entries.forEach(e => e.isIntersecting && loadImage(e.target)); }). No scroll listeners needed. More efficient than scroll events.

आलसी लोडिंग रणनीतियां

Native loading="lazy" for images, dynamic imports for JavaScript, <link rel=preload> for critical resources. Use placeholders (blur-up, skeleton screens) to maintain layout and reduce CLS.

आलसी लोडिंग प्रदर्शन लाभ

Typically reduces initial payload by 30-50% on long pages. Improves LCP and FCP. However, can worsen scroll performance if not implemented carefully. Test on real devices.

त्वरित जाँच

त्वरित जाँच: Intersection Observer का उपयोग किसके लिए किया जाता है?

• जब तत्व व्यूपोर्ट में प्रवेश करते हैं तो पहचान करना
• पृष्ठ लोड समय को मापना
• छवियों को संपीड़ित करना