Dynamically load javascript files and make sure they are cached

Question

I want to load my javascript files after the page is loaded and make sure that they are being cached.

This question has been asked and answered a lot but they all suggest loading it with jQuery ($.getScript) while one of the files I want to load is the jQuery itself and I can not use jQuery. there are some options like:

(function(){
  var newscript = document.createElement('script');
     newscript.type = 'text/javascript';
     newscript.async = false;  //as I'm going to execute some functions 
                               //after this I want to make sure that the 
                               //script is fully loaded
     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);
})();

but I'm not sure if they are cached or not. and Is there a way to fire an event when dynamically loading script is done?

I have only one javascript file as I'm using bundling and minification. but as the size of javascript is big I don't want its load time adde to page load time — Ashkan Mobayen Khiabani, Jun 21 '15 at 20:52
So instead you’re going to… still add its load time to the page’s load time by loading it immediately and synchronously? (I don’t even know whether setting `async = false` works to make it synchronous, but if it does, that seems like it’ll defeat the point.) — Ry-, Jun 21 '15 at 20:54
no I want to wait for the pag to load completely and after the page is fully loaded load the scripts as they are not needed till then these scripts are: my bundled script, google plus one script and ad scripts. — Ashkan Mobayen Khiabani, Jun 21 '15 at 20:56
but wouldn't it still count as load time? I have already dome this but page analyzer website says >150.3KiB of JavaScript is parsed during initial page load. Defer parsing JavaScript to reduce blocking of page rendering. — Ashkan Mobayen Khiabani, Jun 21 '15 at 21:00
Make it `async` too, if you have a completely presentable page before JavaScript is applied. — Ry-, Jun 21 '15 at 21:02
sure, thanks a lot. actually I just had made async = false to make my point and show what I want to do and (as mentioned in my question) get suggestions about how to do it with async = ture (as then I needed to fire an event after its completed) — Ashkan Mobayen Khiabani, Jun 21 '15 at 21:05

score 1 · Accepted Answer · edited May 23 '17 at 11:59

1

You can easily check if they are cached by loading your page for a second time with the network tab of the developer tools of your browser opened. You can tell by the way the scripts are loaded whether the file is cached or not.

They should be, by the way. You're basically inserting a script tag through JavaScript, after which the script is loaded as it would be if the tag was already in the page.

If you make it load asynchronously, you can attach an onload event to a script tag, which will fire as soon as the script is loaded. This should work in any modern browser, including IE9+ in standard mode. If you need support for IE8, you will have to do some extra work, which is what $.getScript() also does. An in-depth discussion of that jQuery functionality, with alternative code snippets can be found in the question 'onload' handler for script tag in Internet Explorer.

edited May 23 '17 at 11:59

Community

1
1

answered Jun 21 '15 at 20:46

GolezTrol

114,394
18
182
210

and I I set the async to ture, is there a way to fire an event after load completes? – Ashkan Mobayen Khiabani Jun 21 '15 at 20:50
1

Please have a look at [this question](http://stackoverflow.com/questions/4845762/onload-handler-for-script-tag-in-internet-explorer). The answers provide altered code from jQuery that provides this onload event like `$.getScript()` does. – GolezTrol Jun 21 '15 at 20:52
I've added it, with a bit of nuance. The 'extra' code seems to be needed only for IE8 and older. – GolezTrol Jun 21 '15 at 21:07

Dynamically load javascript files and make sure they are cached

1 Answers1