How to ensure that the javascript is loaded only once

Question

I am calling a JS using jquery getScript().

Sometimes i could see that the files are already loaded (cached resource). So,On refreshing the cached page is not removed and also the same file is loaded again.

Because of the multiple includes of the same file i am getting errors.

How to avoid that ?

$.getScript("http://localhost:8888//../../demo.js", function() { console.log('Script is loaded.'); });

Are you using a dynamic backend language or are these html pages? — Snowburnt, Oct 03 '13 at 16:51
Possible duplicate of [getScript - How to only call if not already called](https://stackoverflow.com/questions/5845230/getscript-how-to-only-call-if-not-already-called) — João Pimentel Ferreira, Aug 10 '17 at 20:15

score 4 · Answer 1 · answered Oct 03 '13 at 16:52

4

By default, $.getScript sets the cache setting to false. Try setting it to true to see if this solves your problem:

$.ajaxSetup({
  cache: true
});

Add the above before your call like:

$.ajaxSetup({
      cache: true
    });

$.getScript("http://localhost:8888//../../demo.js", function() { console.log('Script is loaded.'); });

directly from jquery docs:

Caching Responses

By default, $.getScript() sets the cache setting to false. This appends a timestamped query parameter to the request URL to ensure that the browser downloads the script each time it is requested. You can override this feature by setting the cache property globally using $.ajaxSetup():

$.ajaxSetup({ cache: true }); Alternatively, you could define a new method that uses the more flexible $.ajax() method.

Examples: Example: Define a $.cachedScript() method that allows fetching a cached script:

jQuery.cachedScript = function( url, options ) { // Allow user to set any option except for dataType, cache, and url options = $.extend( options || {}, { dataType: "script", cache: true, url: url }); // Use $.ajax() since it is more flexible than $.getScript // Return the jqXHR object so we can chain callbacks return jQuery.ajax( options ); }; // Usage $.cachedScript( "ajax/test.js" ).done(function( script, textStatus ) { console.log( textStatus ); });

answered Oct 03 '13 at 16:52

Evan

5,975
8
34
63

I couldt understand the use of cache in ajaxSetup.I am only using getScript to load the script.Can you pls elaborate ? – rolling stone Oct 03 '13 at 16:53
just call the setup before your call – Evan Oct 03 '13 at 16:54
if this solved your problem please go ahead and check the checkmark above to show this was the correct answer. thanks! – Evan Oct 03 '13 at 17:00
But this will have a problem of not make the other ajax request which need not be cached. right ? – rolling stone Oct 03 '13 at 17:01
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/38557/discussion-between-sridhar-and-evan) – rolling stone Oct 03 '13 at 17:02
Evan sure i ll mark your answer. Does my question really make sense ? – rolling stone Oct 03 '13 at 17:07
i wasn't entirely sure what the issue was but I expected this would fix it. – Evan Oct 03 '13 at 17:07

score 1 · Answer 2 · answered Oct 03 '13 at 16:51

1

I believe if it is cached the browser will not go make a new request for it, it will know to load the cached version, so you are good just firing off your $.getScript as you have it.

It may appear in the network tab of chrome developer tools again, but the time will be 0 and the Size (Content) value will say '(from cache)' This would be a good way to test what is actually going on.

answered Oct 03 '13 at 16:51

dezman

18,087
10
53
91

But in the resources (Chrome developer tools) i could find the js loaded twice. – rolling stone Oct 03 '13 at 16:55

score 1 · Answer 3 · answered Oct 03 '13 at 16:55

Assuming your demo.js file contains at least one function or variable, you could check for presence before loading again:

if (typeof(your_variable) === "undefined") {
  $.getScript("http://localhost:8888//../../demo.js", function() { console.log('Script is loaded.'); });
}

(where your_variable is the name of a function or variable inside demo.js)

score -2 · Answer 4 · answered Apr 26 '15 at 13:51

Cashingvis good feature I solved multiple time loading js when I I load through jquery before. My issue was when I call a file loading by jquery I have a jquery file in that loading file now it loads only once so then events i now envoje only once. Thanks a lot have a nice day.

How to ensure that the javascript is loaded only once

4 Answers4

Linked