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

सादे जावास्क्रिप्ट का उपयोग करके गतिशील रूप से लोड jQuery लाइब्रेरी

2025-03-22 पर पोस्ट किया गया
ब्राउज़ करें:216

Dynamically Load jQuery Library Using Plain JavaScript

] चूंकि लोडिंग को अतुल्यकालिक रूप से किया जाता है, इसलिए कॉलबैक संस्करण लेख में शामिल किया गया है ताकि आप समझ सकें कि स्क्रिप्ट डाली जाने के बाद आप कब JQuery का उपयोग कर सकते हैं! मैंने पहले एक सुरक्षा पृष्ठ में स्क्रिप्ट डालने के बारे में एक लेख पोस्ट किया है, ताकि आप वहां और विकल्प पा सकें।

]

// शुद्ध जावास्क्रिप्ट का उपयोग करके jQuery लाइब्रेरी लोड करना (समारोह(){ var newsscript = document.createelement ('स्क्रिप्ट'); NewsScript.Type = 'टेक्स्ट/जावास्क्रिप्ट'; newsscript.async = true; newsscript.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'; । }) ();

कॉलबैक फ़ंक्शन संस्करण लाएं
// 使用纯JavaScript加载jQuery库
(function(){
  var newscript = document.createElement('script');
     newscript.type = 'text/javascript';
     newscript.async = true;
     newscript.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js';
  (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(newscript);
})();
(समारोह () { फ़ंक्शन लोडस्क्रिप्ट (URL, कॉलबैक) { var script = document.createelement ("स्क्रिप्ट") script.type = "पाठ/जावास्क्रिप्ट"; if (script.readystate) {// ie script.onreadystatechange = function () { if (script.ReadyState == "लोड" || script.ReadyState == "पूर्ण") { script.oneardystatechange = null; वापस बुलाओ(); } }; } और {// अन्य ब्राउज़र script.onload = function () { वापस बुलाओ(); }; } script.src = url; document.getElementsByTagName ("हेड") [0] .AppendChild (स्क्रिप्ट); } LoadScript ("https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", फ़ंक्शन () { // jQuery लोडिंग पूरी हो गई है कंसोल.लॉग ('jQuery लोडेड'); }); }) ();

] ]

] यह प्रारंभिक लोड समय को कम करके वेब पेज प्रदर्शन में काफी सुधार कर सकता है। जब पृष्ठ लोड होता है, तो HTML फ़ाइल में लिंक की गई सभी स्क्रिप्ट भी लोड की जाती हैं। यदि आपको तुरंत JQuery का उपयोग करने की आवश्यकता नहीं है, तो डायनेमिक लोडिंग यह बैंडविड्थ को बचाता है और पेज लोडिंग को गति देता है। यह तकनीक विशेष रूप से उन वेबसाइटों के लिए उपयोगी है जो पूरी वेबसाइट के बजाय केवल विशिष्ट विशेषताओं के लिए JQuery का उपयोग करती हैं।
// 使用纯JavaScript加载jQuery库
(function(){
  var newscript = document.createElement('script');
     newscript.type = 'text/javascript';
     newscript.async = true;
     newscript.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js';
  (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(newscript);
})();
JQuery का डायनेमिक लोडिंग कैसे काम करता है?

] यह एक नया स्क्रिप्ट तत्व बनाकर, अपने स्रोत को JQuery लाइब्रेरी URL में सेट करके, और फिर इस स्क्रिप्ट तत्व को HTML दस्तावेज़ में जोड़कर किया जाता है। एक बार स्क्रिप्ट संलग्न होने के बाद, ब्राउज़र को JQuery लाइब्रेरी मिलेगी और इसे निष्पादित करेगा। यह प्रक्रिया आमतौर पर एक फ़ंक्शन के भीतर की जाती है जिसे JQuery की आवश्यकता होने पर बुलाया जा सकता है।

]

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

]

] एक कॉलबैक फ़ंक्शन एक फ़ंक्शन है जिसे किसी अन्य फ़ंक्शन के तर्क के रूप में पारित किया जाता है और एक अन्य फ़ंक्शन को निष्पादित करने के बाद निष्पादित किया जाता है। JQuery के डायनेमिक लोडिंग के मामले में, आप JQuery को लोड करने वाले फ़ंक्शन के लिए कॉलबैक फ़ंक्शन को पास कर सकते हैं। इस कॉलबैक फ़ंक्शन में सभी JQuery कोड शामिल होंगे और JQuery पूरी तरह से लोड होने के बाद निष्पादित होंगे।

]

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

क्या गतिशील लोडिंग jQuery के कोई नुकसान हैं?

] ऐसा इसलिए है क्योंकि आपको यह सुनिश्चित करने की आवश्यकता है कि JQuery का उपयोग शुरू करने से पहले JQuery पूरी तरह से लोड हो गया है, जिसमें आमतौर पर कॉलबैक फ़ंक्शन का उपयोग करना शामिल होता है। हालांकि, बेहतर प्रदर्शन और कम बैंडविड्थ उपयोग के लाभ अक्सर इस नुकसान से आगे निकल जाते हैं।

]

] प्रक्रिया समान है: एक नया स्क्रिप्ट तत्व बनाएं, इसका स्रोत लाइब्रेरी के URL पर सेट करें, और इसे HTML दस्तावेज़ में जोड़ें। इस तकनीक का उपयोग किसी भी जावास्क्रिप्ट लाइब्रेरी में किया जा सकता है, न कि केवल JQuery।

क्या मैं गतिशील रूप से jQuery के कई संस्करणों को लोड कर सकता हूं?

हाँ, आप गतिशील रूप से jQuery के कई संस्करणों को लोड कर सकते हैं। हालांकि, आपको विभिन्न संस्करणों के बीच संघर्ष से बचने के लिए सावधान रहने की आवश्यकता है। JQuery Noconflict () नामक एक फ़ंक्शन प्रदान करता है जिसका उपयोग इस तरह के संघर्षों से बचने के लिए किया जा सकता है। यह फ़ंक्शन पहले लाइब्रेरी में

$

चर का नियंत्रण लौटाता है, जो इसे लागू करता है, जिससे JQuery के कई संस्करणों को सह -अस्तित्व की अनुमति मिलती है।

]

] हालाँकि, आपको यह सुनिश्चित करने की आवश्यकता है कि अन्य पुस्तकालयों के साथ इसका उपयोग शुरू करने से पहले JQuery पूरी तरह से भरी हुई है। यह JQuery लोड होने के बाद निष्पादित कॉलबैक फ़ंक्शन का उपयोग करके किया जा सकता है।

क्या डायनेमिक लोडिंग JQuery सभी ब्राउज़रों के साथ संगत है?

] हालांकि, बहुत पुराने ब्राउज़रों के लिए जो डायनामिक स्क्रिप्ट लोडिंग का समर्थन नहीं करते हैं, आप पारंपरिक तरीके से HTML दस्तावेज़ में JQuery को शामिल करना चाह सकते हैं।

नवीनतम ट्यूटोरियल अधिक>

चीनी भाषा का अध्ययन करें

अस्वीकरण: उपलब्ध कराए गए सभी संसाधन आंशिक रूप से इंटरनेट से हैं। यदि आपके कॉपीराइट या अन्य अधिकारों और हितों का कोई उल्लंघन होता है, तो कृपया विस्तृत कारण बताएं और कॉपीराइट या अधिकारों और हितों का प्रमाण प्रदान करें और फिर इसे ईमेल पर भेजें: [email protected] हम इसे आपके लिए यथाशीघ्र संभालेंगे।

Copyright© 2022 湘ICP备2022001581号-3