हाल के वर्षों में एचटीएमएल में सबसे अच्छे सुधारों में से एक लोडिंग = "आलसी" विशेषता थी जिसे आप छवियों (आईफ्रेम भी) में जोड़ सकते हैं जो ब्राउज़र को लोड न करने के लिए कहेगा छवि जब तक यह व्यूपोर्ट में न हो।

बहुत सरल, बहुत उपयोगी। लेकिन क्या यह बहुत अच्छा नहीं होगा यदि आप स्क्रिप्ट के लिए भी ऐसा कर सकें। ताकि आप अपने घटकों को आलस्यपूर्वक लोड कर सकें, केवल तभी/जब उनकी वास्तव में आवश्यकता हो...

ठीक है, तत्व की एक अन्य विशेषता ऑनलोड और ऑनररर विशेषताओं के साथ छवि लोड होने (या लोड नहीं होने) के बाद के बाद स्क्रिप्ट चलाने की क्षमता है।

कंसोल.लॉग ('इमेज लोडेड')" >

यह ऑनलोड "कॉलबैक" केवल तभी सक्रिय किया जाएगा जब वह छवि लोड की जाएगी, और यदि छवि को लापरवाही से लोड किया गया है, तो यह केवल तभी सक्रिय होगा जब छवि व्यूपोर्ट में होगी। और वोइला! एक आलसी भरी हुई स्क्रिप्ट।

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

छवि स्वयं कुछ भी हो सकती है, या, अधिक महत्वपूर्ण बात, कुछ भी नहीं। जैसा कि मैंने पहले उल्लेख किया है कि ऑनरर कॉलबैक है, जो - जैसा कि नाम से पता चलता है - जब छवि

नहीं लोड होती है तो सक्रिय हो जाएगी।

इसका मतलब यह नहीं है कि आपको स्रोत को एक गैर-मौजूद छवि पर इंगित करने की आवश्यकता है, जिसके परिणामस्वरूप लापता छवियों के बारे में लाल 404 त्रुटियों से भरा कंसोल होगा, और कोई भी ऐसा नहीं चाहता है।

यदि src छवि वास्तव में एक छवि नहीं है, तो ऑनरर कॉलबैक भी सक्रिय हो जाता है, और ऐसा करने का सबसे आसान तरीका डेटा: प्रारूप का उपयोग करके एक छवि को "बुरी तरह से एन्कोड" करना है। इससे गायब छवियों की चेतावनियों से कंसोल न भरने का भी लाभ होता है?

कंसोल.लॉग('छवि लोड नहीं हुई')" >

इसके परिणामस्वरूप पेज पर अभी भी "टूटी हुई छवि" थंबनेल होगा, लेकिन हम उस तक पहुंचेंगे।

ठीक है, लेकिन हमें अभी भी उस जावास्क्रिप्ट को इनलाइन करना होगा जिसे हम चलाना चाहते हैं, तो हम इसे कैसे ठीक करेंगे?

खैर, अब ईएस मॉड्यूल समर्थन लगभग सार्वभौमिक है, हम किसी इवेंट के सक्रिय होने के बाद स्क्रिप्ट को लोड करने के लिए बहुत शक्तिशाली

इवेंट-इंपोर्ट-तब-डिफॉल्ट जावास्क्रिप्ट लोडिंग तकनीक का उपयोग कर सकते हैं, जैसे:

_.default(this))" >

नोट: यह ऑनक्लिक, ऑनचेंज आदि इवेंट के लिए भी काम करता है
नोट: अंडरस्कोर मॉड्यूल तक पहुंचने का सिर्फ शॉर्टहैंड तरीका है, आप .then(Module => Module.default(this)) भी लिख सकते हैं

ठीक है, तो यहाँ क्या हो रहा है!?

पहले आइए देखें कि कुछ घटक कैसा दिख सकता है:

//some-component.js डिफ़ॉल्ट तत्व निर्यात करें => { element.outerHTML = ` `; }

तो, आपने देखा होगा कि ऑनरर कॉलबैक में, मैंने इसे डिफ़ॉल्ट निर्यात के तर्क के रूप में पारित किया था। मेरे ऐसा करने का कारण

यह (शब्दांश के लिए क्षमा करें?) स्क्रिप्ट को वह देना था जिसने इसे बुलाया था, क्योंकि यह (मैंने इसे फिर से किया?) संदर्भ यह = .

अब आप टूटी हुई छवि को अपने HTML मार्कअप से बदलने के लिए बस element.outerHTML का उपयोग कर सकते हैं और वहां आपके पास आलसी लोडेड स्क्रिप्ट हैं! ?

कैशिंग, और पासिंग तर्क

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

_.default(this))" > _.default(this))" >

':'' के बाद की स्ट्रिंग कुछ भी हो सकती है, जब तक कि वे अलग-अलग हों।

फ़ंक्शन में पैरामीटर पास करने का एक बहुत ही सरल तरीका HTML में डेटा-समथिंग विशेषता का उपयोग करना होगा:

_.default(this))" >

चूंकि हम इसे फ़ंक्शन में भेज रहे हैं, आप डेटा विशेषताओं तक इस प्रकार पहुंच सकते हैं:

डिफ़ॉल्ट तत्व निर्यात करें => { स्थिरांक { संदेश } = तत्व.डेटासेट element.outerHTML = ` `; }

कृपया मुझे टिप्पणियों में बताएं कि आप क्या सोचते हैं! ❤️