Why call $.getScript instead of using the <script> tag directly?

Question

I don't understand the reason for replacing this:

<script src="js/example.js"></script>

with this:

$.getScript('js/example.js', function() {
  alert('Load was performed.');
});

Is there a particular reason to use the jQuery version?

Answer 1

The only reason I can think of is that you get the callback when the script is loaded. But you can get that callback using a script tag, too, by using the load event (or on really old IE, onreadystatechange).

In contrast, there are several negatives to doing it this way, not least that getScript is subject to the Same Origin Policy, whereas a script tag is not.

Even if you need to load a script dynamically (and there are several reasons you might need to do that), frankly unless you really need the callback, I'd say you're better off just loading the script by adding a script tag:

$('head:first').append("<script type='text/javascript' src='js/examplejs'><\/script>");

(Note: You need the otherwise-unnecessary \ in the ending tag in the above to avoid prematurely ending the script tag this code exists within, if it's in an inline script tag.)

script tags added in this way are not subject to the Same Origin Policy. If you want the load callback, then:

$("<script type='text/javascript' src='js/examplejs'><\/script>")
    .on("load", function() {
        // loaded
    })
    .appendTo('head:first');

(As I said, for really old IE, you'd have to do more than that, but you shouldn't need to deal with them these days.)

Answer 2

I can think of three reasons you might use the jQuery form:

1. You want all of your script declarations at the top of your document, but you also know that placing script declarations there forces the browser to download them in their entirety before proceeding further in the page rendering process. This can introduce measurable delay. The jQuery form will schedule the script loads until after the document is finished downloading, similar to the effect of placing all of your <script> tags at the end of the document, only without the syntactic weirdness.
2. The <script> mechanism is not available to scripts that do not live in the HTML document itself; that is, if a script included on the page with <script> wants to load a script, it has no option but to use a JavaScript-based approach, such as calling the jQuery function.
3. The jQuery form allows notification of the script's successful execution, in the form of a supplied callback function.