We have mentioned jQuery CDN in article How To Append jQuery link In Html Correctly With Examples. jQuery CDN can provide more stable and fast jQuery lib file import than import jQuery lib file from your web server. Use jQuery CDN can reduce your web server bandwidth cost and improve your web server performance. This article will show you some famous jQuery CDN service provider and how to fix some issues when you use jQuery CDN service.
1. jQuery CDN Service Providers.
There are 4 famous jQuery CDN providers in the world now. They are jQuery own CDN, jQuery CDN Google, jQuery CDN Microsoft, and jQuery CDN Cloudflare.
- Append jQuery from jquery own CDN.
<head> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> </head> - Append jQuery from Google CDN.
<head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> - Append jQuery from Microsoft CDN.
<head> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script> </head> - Append jQuery from Cloudflare CDN.
<head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head>
2. How To Fix jQuery CDN Connect Timeout Issue.
When you use a jQuery CDN service, you may encounter can not connect to jQuery CDN server issues. Below list reasons for this issue.
- The CDN server IP is blocked by a firewall or proxy server.
- The CDN server is shutdown.
To fix this issue we can use below source code. Below source code will first include jQuery from a CDN server, if the CDN server can not connect, then it will include a local jQuery lib file from your web server instead.
<head>
<!-- Load jQuery from jQuery CDN Google -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- If can not load jQuery from jQuery CDN Google, then load jQuery from a local version. -->
<script>
//window.jQuery = null
if(window.jQuery){
alert('Load jQuery from CDN successfully.')
}else{
alert('Load jQuery from CDN failed, it will use a local jQuery version.')
document.write('<script src="/js/jquery-3.3.1.min.js"><\/script>')
}
</script>
</head>
3. Asynchronous Load jQuery From jQuery CDN In Google Maps JavaScript API.
Besides using jQuery CDN Google hosted jQuery file in your Html file directly, google maps javascript API also provides a way to include jQuery file in Html file like below. But first, you should apply an API KEY.
<script type="text/javascript" src="http://www.google.com/jsapi?key=INSERT-YOUR-KEY"></script>
<script type="text/javascript">
// load jquery from google cdn server. This is an asynchronous process.
google.load("jquery", "3.3.1");
google.load("swfobject", "2.2");
// load google maps.
google.load('maps', '2', {'callback': googleMapSetup });
</script>
But in above code, google will load the jquery lib asynchronously, so your own jQuery source code should wait for google to load jQuery file completely to execute. And google provides a method setOnLoadCallback to achieve this, all your own jQuery source code should be wrote in this method, otherwise, it will raise an error.
<script type="text/javascript" src="http://www.google.com/jsapi?key=INSERT-YOUR-KEY"></script>
<script type="text/javascript">
google.load("jquery", "3.3.1");
google.load("swfobject", "2.2");
google.load('maps', '2', {'callback': googleMapSetup });
google.setOnLoadCallback(function() {
$(function() {
// Your own jQuery code should be placed here instead of $(document).ready()
});
});
</script>
