Loading Scripts with getScript()
In this page:
What is getScript()?
$.getScript() fetches a JavaScript file from a URL over AJAX and executes it as soon as it arrives, effectively injecting and running a script tag dynamically. This lets a page pull in extra code only when it's actually needed.
Example: 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>Use a Success Callback
The done callback runs after the script has loaded and executed successfully, which is the safe place to start calling any functions the new script defines. Calling those functions before the script has actually finished loading would fail, since they wouldn't exist yet.
Example: 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>Handle Script Errors
A script may fail to load -- due to a bad URL, a network error, or a blocked request -- and chaining .fail() lets you handle that case and show a useful message instead of leaving broken functionality with no explanation.
Example: 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>Load a Script on Demand
Loading a script only when it's actually needed, rather than including it in every page's initial load, is called loading on demand, and it can keep the initial page lighter and faster. getScript() is the standard jQuery way to implement this pattern.
Example: 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>Small getScript() Project
getScript() is helpful when an extra JavaScript library or plugin is needed only for a particular feature, like a chart library that's only used on one specific page. Loading it on demand avoids making every visitor download code most of them will never use.
Example: 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>Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: