एचटीएमएल/जेएस ऑनलोड क्या है और यह कैसे काम करता है?

वेबपेज को लोड करने में पेज की सामग्री, छवियों और अन्य संसाधनों के पूरी तरह से लोड होने की प्रतीक्षा करना शामिल है।

कुछ वेबपृष्ठ यह सुनिश्चित करते हैं कि कुछ कार्यक्षमता तब तक उत्पन्न नहीं होती जब तक कि सब कुछ लोड होना समाप्त न हो जाए। एक उदाहरण में पृष्ठ लोड होने के बाद ही डेटाबेस से डेटा पुनर्प्राप्त करना शामिल है।

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

बॉडी HTML एलिमेंट के साथ ऑनलोड का उपयोग कैसे करें

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

इस परियोजना में प्रयुक्त कोड एक में उपलब्ध है गिटहब रिपॉजिटरी और आपके लिए एमआईटी लाइसेंस के तहत उपयोग करने के लिए स्वतंत्र है।

1. नामक एक नई HTML फ़ाइल में index.html, निम्न मूल HTML कोड जोड़ें:

   एचटीएमएल>
   <एचटीएमएल>
   <सिर>
   <शीर्षक>ऑनलोड का उपयोग करने का उदाहरणशीर्षक>
   सिर>
   <शरीर>
   <एच 1>ऑनलोड () का उपयोग करने का उदाहरणएच 1>
   <पी>यह उदाहरण दर्शाता है कि जावास्क्रिप्ट में ऑनलोड () ईवेंट का उपयोग कैसे करें।पी>
   शरीर>
   एचटीएमएल>

2. नामक फ़ोल्डर में एक नई फ़ाइल बनाएँ स्क्रिप्ट.जेएस. स्क्रिप्ट टैग का उपयोग करके इस फ़ाइल को अपने HTML पेज से लिंक करें। आप बॉडी टैग के नीचे स्क्रिप्ट टैग जोड़ सकते हैं:

   <शरीर>
    आपकी सामग्री 
   <लिखी हुई कहानीस्रोत="स्क्रिप्ट.जेएस">लिखी हुई कहानी>
   शरीर>

3. अपने HTML बॉडी टैग की सामग्री के अंदर, एक खाली पैराग्राफ़ टैग जोड़ें।

   <पीपहचान="आउटपुट">पी>

4. जावास्क्रिप्ट फ़ाइल के अंदर, जोड़ें विंडो.ऑनलोड घटना समारोह। पृष्ठ लोड होने पर यह निष्पादित होगा:

   खिड़की.ऑनलोड = समारोह() {
   // पेज लोड होने पर चलाने के लिए कोड
   };

5. फ़ंक्शन के अंदर, खाली पैराग्राफ टैग की सामग्री को पॉप्युलेट करें। यह पृष्ठ लोड होने पर केवल एक संदेश प्रदर्शित करने के लिए पैराग्राफ टैग को बदल देगा:

   दस्तावेज़.getElementById("आउटपुट".आंतरिक HTML = "पेज लोड!";

6. वैकल्पिक रूप से, आप भी कर सकते हैं एक घटना श्रोता का प्रयोग करें सुनने के लिए DOMContentLoaded आयोजन। DOMContentLoaded विंडो.ऑनलोड से पहले ट्रिगर करता है। सभी बाहरी संसाधनों के लोड होने की प्रतीक्षा करने के बजाय, जैसे ही HTML दस्तावेज़ तैयार होता है, यह ट्रिगर हो जाता है।

   दस्तावेज़ऐडइवेंट लिस्टनर ('DOMContentLoaded', समारोह() {
   दस्तावेज़.getElementById("आउटपुट".आंतरिक HTML = "पेज लोड!";
   });

7. पृष्ठ के लोड होने पर संदेश देखने के लिए, वेब ब्राउज़र में index.html फ़ाइल खोलें:
8. पृष्ठ लोड हो गया है या नहीं यह जांचने के लिए जावास्क्रिप्ट ईवेंट का उपयोग करने के बजाय, आप इसका उपयोग भी कर सकते हैं लदाई पर एक ही परिणाम के लिए HTML विशेषता। अपनी HTML फ़ाइल में बॉडी टैग में ऑनलोड विशेषता जोड़ें:

   <शरीरलदाई पर="इस में()">

9. बनाएँ इस में() जावास्क्रिप्ट फ़ाइल के अंदर कार्य करें। एक ही समय में ऑनलोड HTML विशेषता और ऑनलोड जावास्क्रिप्ट ईवेंट दोनों का उपयोग करने की अनुशंसा नहीं की जाती है। ऐसा करने से अनपेक्षित व्यवहार या दो कार्यों के बीच विरोध हो सकता है।

   समारोहइस में() {
   दस्तावेज़.getElementById("आउटपुट".आंतरिक HTML = "पेज लोड!";
   }

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

छवि HTML तत्व के साथ ऑनलोड का उपयोग कैसे करें

जब अन्य तत्व पृष्ठ पर लोड होते हैं, तो कोड निष्पादित करने के लिए आप ऑनलोड ईवेंट का भी उपयोग कर सकते हैं। इसका एक उदाहरण छवि तत्व है।

1. आपकी index.html फ़ाइल वाले फ़ोल्डर के अंदर, कोई छवि जोड़ें।
2. HTML फ़ाइल के अंदर, एक छवि टैग जोड़ें, और src विशेषता को फ़ोल्डर में सहेजी गई छवि के नाम से लिंक करें।

   <आईएमजीपहचान="मेरी छवि"स्रोत="पिजमोन.पीएनजी"चौड़ाई="300">

3. छवि लोड होने पर संदेश प्रदर्शित करने के लिए एक और खाली पैराग्राफ़ टैग जोड़ें:

   <पीपहचान="इमेजलोडेडमैसेज">पी>

4. जावास्क्रिप्ट फ़ाइल के अंदर, छवि पर एक ऑनलोड घटना जोड़ें। यूनिक आईडी का इस्तेमाल करें मेरी छवि यह निर्धारित करने के लिए कि ऑनलोड ईवेंट को किस छवि तत्व में जोड़ना है:

   वर मेरी छवि = दस्तावेज़.getElementById("मेरी छवि");
   myImage.onload = समारोह() {
   
   };

5. ऑनलोड ईवेंट के अंदर, जोड़ने के लिए आंतरिक HTML बदलें छवि लोड की गई संदेश:

   दस्तावेज़.getElementById("इमेजलोडेडमैसेज".आंतरिक HTML = "छवि लोड!";

6. के बजाय का उपयोग करने का myImage.onload, आप सुनने के लिए ईवेंट श्रोता का भी उपयोग कर सकते हैं भार जावास्क्रिप्ट घटना:

   myImage.addEventListener ('भार', समारोह() {
   दस्तावेज़.getElementById("इमेजलोडेडमैसेज".आंतरिक HTML = "छवि लोड!";
   });

7. छवि और संदेश देखने के लिए वेब ब्राउज़र में index.html खोलें:
8. उसी परिणाम के लिए, आप ऑनलोड HTML विशेषता का भी उपयोग कर सकते हैं। बॉडी टैग के समान, img टैग में ऑनलोड विशेषता जोड़ें:

   <आईएमजीपहचान="मेरी छवि"स्रोत="पिजमोन.पीएनजी"चौड़ाई="300"लदाई पर="इमेजलोडेड ()">

9. छवि लोड होने पर कोड को निष्पादित करने के लिए जावास्क्रिप्ट फ़ाइल में फ़ंक्शन जोड़ें:

   समारोहइमेजलोडेड() {
   दस्तावेज़.getElementById("इमेजलोडेडमैसेज".आंतरिक HTML = "छवि लोड!";
   }

जावास्क्रिप्ट लोड करते समय ऑनलोड का उपयोग कैसे करें

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

1. अपनी HTML फ़ाइल में स्क्रिप्ट टैग में ऑनलोड विशेषता जोड़ें।

   <लिखी हुई कहानीस्रोत="स्क्रिप्ट.जेएस"लदाई पर="लोडेडजेएस ()">लिखी हुई कहानी>

2. फ़ंक्शन को अपनी जावास्क्रिप्ट फ़ाइल में जोड़ें। द्वारा एक संदेश प्रिंट करें ब्राउज़र कंसोल में लॉग इन करना:

   समारोहलोडेडजेएस() {
   सांत्वना देना।लकड़ी का लट्ठा("जेएस ब्राउज़र द्वारा लोड किया गया!");
   }

3. ब्राउज़र में index.html फ़ाइल खोलें। तुम कर सकते हो क्रोम देवटूल का उपयोग करें कंसोल में कोई संदेश आउटपुट देखने के लिए।

ब्राउजर में वेबपेज लोड हो रहे हैं

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

आप इस बारे में अधिक जान सकते हैं कि आप अपनी वेबसाइट में अधिक रोचक लोडिंग पृष्ठ डिज़ाइन कैसे एकीकृत कर सकते हैं।