getScript() से Scripts Load करना
In this page:
$.getScript(url, function () {
// script loaded
});getScript() क्या है?
$.getScript() AJAX के through एक URL से एक JavaScript file fetch करता है और आते ही उसे execute कर देता है, effectively एक script tag को dynamically inject और run करते हुए।
उदाहरण: What is getScript()?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
$.getScript("https://code.jquery.com/jquery-3.7.1.min.js", function() {
console.log("Script loaded and executed");
});
</script>
</body>
</html>एक Success Callback इस्तेमाल करना
done callback script के successfully load और execute हो जाने के बाद चलता है, जो नई script द्वारा define किए गए किसी भी functions को call करना शुरू करने के लिए safe जगह है।
उदाहरण: Use a Success Callback
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
$.getScript("https://code.jquery.com/jquery-3.7.1.min.js").done(function() {
console.log("Safe to use functions from the new script now");
});
</script>
</body>
</html>Script Errors Handle करना
एक script load होने में fail हो सकती है -- एक bad URL, network error, या blocked request की वजह से -- और .fail() chain करना आपको उस case को handle करने और एक useful message दिखाने देता है।
उदाहरण: Handle Script Errors
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
$.getScript("https://example.com/missing-script-404.js").fail(function() {
console.log("Script failed to load");
});
</script>
</body>
</html>जब ज़रूरत हो तब एक Script Load करना
किसी script को हर page के initial load में शामिल करने के बजाय सिर्फ तभी load करना जब वह असल में ज़रूरी हो, on demand loading कहलाता है, और यह initial page को हल्का रख सकता है।
उदाहरण: Load a Script on Demand
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="btn">Load Feature</button>
<script>
$("#btn").on("click", function() {
$.getScript("https://code.jquery.com/jquery-3.7.1.min.js", function() {
console.log("Feature script loaded on demand");
});
});
</script>
</body>
</html>एक छोटा getScript() Project
getScript() तब उपयोगी है जब किसी particular feature के लिए सिर्फ एक extra JavaScript library या plugin चाहिए, जैसे कोई chart library जो सिर्फ एक page पर इस्तेमाल होती है।
उदाहरण: Small getScript() Project
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="loadChart">Load Chart Library</button>
<script>
$("#loadChart").on("click", function() {
$.getScript("https://code.jquery.com/jquery-3.7.1.min.js", function() {
console.log("Chart library ready");
});
});
</script>
</body>
</html>- किसी script के functions को
$.getScript(...)के तुरंत बाद इस्तेमाल करना बजाय उसके.done()callback के अंदर, ताकि वे अभी define ही न हुए हों। .fail()भूल जाना, ताकि एक गलत URL या blocked request बिना किसी visible feedback के fail हो जाए।- हर click पर बार-बार same script load करना, जो इसे फिर से execute कर देता है और event handlers तथा side effects को duplicate कर सकता है।
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: