How do I link scripts externally and internally?

Question

I have a website that I want to work online and offline. I want to decrease load time, so I minified the slow loading scripts. It didn't work enough. Locally, some of the scripts are taking 4-6 seconds to load.

I know that linking scripts externally speeds it up drastically. I have tried it and it works. But some of the users will not have internet access. Is there a way to link a group of scripts to an external site, and locally if they do not have internet access?

 <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
 <script src="js/jquery.dataTables.min.js" type="text/javascript"></script>
 <script src="ui/jquery-ui.min.js" type="text/javascript"></script>

score 1 · Accepted Answer · edited May 23 '17 at 12:01

You can do something similar to this answer. Basically, the idea is that you attempt to load the Internet based script for jQuery. Afterward, you do a normal script where you check if jQuery === undefined. If it does, you want to load the local copy.

Basically, an example of what you want to do:

<script src="[jQueryURL]" type="text/javascript"></script>
<script src="[dataTablesURL]" type="text/javascript"></script>
<script src="[jQueryUIURL]" type="text/javascript"></script>
<script type="text/javascript">
    if(jQuery === undefined) {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "js/jquery-1.9.1.min.js";
        document.getElementsByTagName('head')[0].appendChild(script);
        //repeat for other two scripts here
    }
</script>

What will happen is that it will attempt to load the scripts in question, and afterward it will check if jQuery is defined. If it's not, that means the scripts didn't load, so you want to load the local versions and append them to your header.

Nice resource, please try to complement your answer with some code. — DaniP, Jun 17 '16 at 14:39
The only reason I didn't is because the indicated answer is identical to the code I would have presented. — Polantaris, Jun 17 '16 at 14:42
Doesn't matter it's better include the code than just the link, other way it could be just a comment or vote for duplicate, modify that code to adress exactly what op wants and include it on your answer could be a better way. And improve your answer to get upvotes — DaniP, Jun 17 '16 at 14:44

score 0 · Answer 2 · answered Jun 17 '16 at 14:38

Ensure that the script declares a global variable you can test for. Then generate a local script loading element if the external script fails to load (which you can determine by testing for that variable).

<script src="http://example.com/example.js"></script>
<script>
    if !(window.Example) {
        document.write('<script src="../scripts/example.js"><\/script>');
    }
</script>

score 0 · Answer 3 · answered Jun 17 '16 at 14:40

<script type="text/javascript">
 if(navigator.onLine) 
 { 
  alert("Connected");
 }
 else
 {
  alert("Not Connected");
 }
</script>

First Check if internet connection exist then load external file other wise load internal file

How do I link scripts externally and internally?

3 Answers3