CODEWITHSUNDEEP
javascriptcssexternal
Lance Bitner
Lance Bitner

Reputation: 356

How do I link scripts externally and internally?

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>

Upvotes: 1

Views: 118

Answers (3)

Polantaris
Polantaris

Reputation: 99

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.

Upvotes: 1

user5682261
user5682261

Reputation: 

<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

Upvotes: 0

Quentin
Quentin

Reputation: 943152

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>

Upvotes: 0

Related Questions