How to Use Multiple CDN for Library Scripts? [duplicate] - javascript

This question already has answers here:
Best way to use Google's hosted jQuery, but fall back to my hosted library on Google fail
(23 answers)
Closed 5 years ago.
I want to use both "Google Hosted Libraries" and "Microsoft Ajax Content Delivery Network" for library scripts like jQuery, so that even if one fails to load (e.g. Google), another one is loaded, and the webpage is rendered correctly.
Since Google is banned in China and in some other regions, it is necessary to add backup sources like Microsoft/CDNJS or local files.
Please note that my jQuery is at the bottom of the page, not in the head.
Could you please give me a reliable solution? It'd be great if it's loaded in the following order:
Google>CDNJS/MICROSOFT>Local File
This question is not duplicate! I didn't find any reliable/specific solution for this issue.

Insert the following javascript right after your initial script tag.
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
(window.jQuery)||document.write('<script type="text/javascript" src="/scripts/jquery-2.2.4.min.js"><\/script>');//]]>
</script>
Explanation:
Try load the jQuery script from a cdn
If that fails load a fallback script from js
Note: replace the url with your preferred fallback url

Related

What better - Jquery file from my SERVER or from URL? [duplicate]

This question already has answers here:
Where do you include the jQuery library from? Google JSAPI? CDN?
(16 answers)
Closed 7 years ago.
What better - Jquery file from my SERVER or from URL?
<script src="jquery.js"></script>
or
<script src='http://code.jquery.com/jquery-1.7.1.min.js'></script>
All too often, I find code similar to this when inspecting the source for public websites that use jQuery:
<script type="text/javascript" src="jQuery.min.js"></script>
If you’re doing this on a public facing website, you are doing it wrong.
Instead, I urge you to use the Google Hosted Libraries content delivery network to serve jQuery to your users directly from Google’s network of data centers. Doing so has several advantages over hosting jQuery on your server(s): decreased latency, increased parallelism, and better caching.
Better use this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

Difference between using local JS and JS from CDN [duplicate]

This question already has answers here:
What are the advantages and disadvantages of using a content delivery network (CDN)? [closed]
(4 answers)
Closed 7 years ago.
I am trying to write a JavaScript script to populate HTML using jQuery and Bootstrap. In many tutorials on the internet, tutors mention to using files from a Content Delivery Network(CDN) instead of calling those files locally.
But I am unable to foresee any advantage making a call to js or CSS over a network, instead of loading it locally, which should prove good enough.
I am eager to know, what is the difference in terms of network and machine resources as well as the load on a page.
Pros using CDN:
* cache for the library in the client side.
Cons using CDN:
* If the cdn's site is down, your site will not get the files.
* Cdn file changes frequently and therefore your production site will work with the newest files that you didn't checked them(this can be very dangerous).
Now you can think if this suitable for your site.

Should I be concerned if my website is linked to an external Style Sheet [duplicate]

This question already has answers here:
Why should I use Google's CDN for jQuery?
(7 answers)
Closed 7 years ago.
At some point in my website I needed a Timer so I looked for a free jQuery Countdown Timer and found this one : Example
After integrating the model to my page inside my IDE (VS2010) i payed attention that some CSS and JS files are not stored locally in my project folder, but they are still Linked to an External sources, and that had me thinking : Am i suppose to find a way to download these file locally than use them, or should i use them the way they are ? and should i be concerned if they may change or desperate at some point in the future ? what are the best practices in case ?
Here is an example of the HTML code :
....
....
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script type="text/javascript" src="inc/TimeCircles.js"></script>
....
....
Those are CDNs ( http://it.wikipedia.org/wiki/Content_Delivery_Network ) meaning that they're hosted by someone for all of us to use, so you're pretty much guaranteed it will stay there. The main advantage of using CDNs is that the user will probably have visited another site that uses the same resource and this means that said resource is already cached in the user's computer, leading to a faster loading time for your site.
You should never rely on external sources for critical files unless you're using a dependable CDN. In this case you're using the most common CDN sources for Bootstrap and jQuery, so you're all set.
I assume that you've downloaded the timer files and are hosting those locally. Your reference to them confused me, so I've updated this answer.

How to load a local copy of a generic CSS file when CDN is down? [duplicate]

This question already has answers here:
How to fallback to local stylesheet (not script) if CDN fails
(11 answers)
Closed 9 years ago.
Is there a generic solution for loading a local backup CSS file when CDN is down?
<link rel="stylesheet" href="//somecdn.com/somefile.css"/>
<!-- load a local file here if needed -->
I have 5 such CSS files from different CDNs, and the order of loading matters.
The solutions I came across so far are less than satisfactory:
create a dummy div and use it to check some property that should have been loaded
check document.styleSheets[0].cssRules.length -- this is cross-site access and not allowed by some browsers
The div attribute detection works as the first step. Pick something that works reliably. For example, height and visibility might work well.
Based on the detection result you can decide to load a local css dynamically:
csl=document.createElement('link');
csl.setAttribute('rel','stylesheet');
csl.setAttribute('type','text/css');
csl.setAttribute('href','mylocalcss.css');
document.getElementsByTagName("head").item(0).appendChild(csl);
If CDN is not reliable, then do not use them.
There is no easy way to load a backup CSS like there is for JS files. Switch to always load local CSS, but continue to use CDN for JS (with a local backup).

Best filename to include JQuery in an embedded application

I'm using JQuery for an embedded system that is isolated from the outside word. Therefore jquery exists on the local server (the embedded system). The question is: what would be the best file name to include JQuery in my html?
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-1.6.4.js"></script>
I searched Stackoverflow and found the following threads despite of being useful they don't answer my specific question in this scenario:
What is the best way to include latest version of jQuery?
What is the best way to include jQuery in DotNetNuke 4.8.x?
Because if later we switch to a newer version, I don't have to go through the html files and update them. This is an embedded system and once it's running we hardly update any file. Besides the customer doesn't need to know the version of the libraries and developers know the version already.
jquery-1.6.4.js is better because
it helps clearly identify which version is being used
it prevents possible caching issues that might arise if you changed the jQuery version but not the file name.
Option 2.
Because when you update the version the version number of the file name will act as a cache buster.
This means if a browser caches your file, a change in file name will force it to redownload, as it's a completely new file.

Categories