Saturday, August 7, 2021

How to download jQuery into Web Page from CDN? 3 Examples

jQuery is one of the most popular and powerful JavaScript libraries, but in order to use it, you need to load it into your web page using the standard HTML <script> tag. Based on whether your web page is publicly accessible or for an organization, you can either choose to load the jQuery library from the local file system, bundled inside your web application or you can directly download using one of the content delivery networks (CDN) e.g. Google or Microsoft CDN. Choosing CDN to download jQuery can offer a performance benefit because their servers are spread across the globe.

This also offers the advantage that if a visitor of your site has already downloaded a copy of jQuery from the same CDN, then it won't have to be re-downloaded. 

By the way, if you want to bundle jQuery into your web application or want to load it from the local file system, you can always download the latest version of jQuery from the jQuery site at http://jquery.com. Installing jQuery required this library to be placed inside your web application and using the HTML <script> tag to include it into your pages e.g. <script type="text/JavaScript" src="scripts/jquery-1.10.2.js"></script>

The jQuery site offers compressed and uncompressed copies of jQuery files, the uncompressed file is good for development and debugging, but can slow down page loading if used in production. The compressed file saves bandwidth and improves performance in production

In this article, I am sharing a couple of CDN URLs from where you can directly load jQuery files into your web page, this includes popular Google CDN, jQuery CDN, and Microsoft CDN.



List of URL to include the jQuery library into a web page

Ladoing jQuery from Google and Microsoft CDN URLHere is the list of a couple of content delivery network, which provides jQuery hosting. You can use any of these URL to include or reference the jQuery library into your page. As I said CDN networks improve the loading of jQuery files by offering local hubs, as well as, since they are popular, it might be possible that your visitor has already downloaded jQuery from requested CDN. 

In the first case, it helps to load jQuery faster from the closest server, while in the second case it can leverage the already downloaded version of jQuery, which means faster response time. Here are the three most popular content delivery network URLs for loading jQuery libraries in your web pages.


1. Google CDN URL to download jQuery

http:////ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js is the Google CDN url to download jQuery version 1.10.1, you just need to include that into src attribute of HTML <script> tag as shown below:

<script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" ></script>


One of the worth noting things is jquery.min.js, which is the actual jQuery library, .min version is a compressed production version, which is without debugging information to reduce the size of jQuery so that it can be loaded faster.



2. jQuery's CDN to download jQuery files

To use the jQuery CDN, just reference the jQuery library directly from http://code.jquery.com in the script tag, as shown below :

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

This will download jQuery version 1.10.1, but you are free to download earlier jQuery version including jQuery 1.4 or jQuery 1.6. visit http://code.jquery.com to see all available files.



3) Microsoft's CDN to load jQuery JavaScript library

Microsoft CDN also host some of the most popular third party JavaScript libraries, including various version of jQuery.  You can use following URL to reference jQuery directly inside src attribute of <script> tag.

jQuery version 1.10.0              : http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js
jQuery version 2.0.0            : http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.0.min.js



Where to include jQuery - Head or Body

You can include <script type="JavaScript" src="/scripts/jquery.min.js"> 
in either <head> or at the bottom of the page, just before the </body> tag. The former way of loading JavaScript library is older and later is a newer way to do the same, the only difference is performance. 

By loading jQuery at the bottom of the page, you let page gets loaded and rendered, and doesn't wait for jQuery or any other JavaScript library to be loaded. By the way with a modern browser, this performance difference is negligible.

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery Tutorials</title>
  </head>
  <body>
  
        <!-- Your HTML structures -->
  
        <!-- including jQuery from local resource -->
    <script src='scripts/jquery.min.js'></script>
  </body>
</html>

By the way, if you have put all your jQuery code inside another JavaScript file, then make sure you put it after jQuery.

Summary

Here are the three popular CDN URL to include jQuery library version 1.9.0 directly into your web page :

jQuery CDN URL           : http://code.jquery.com/jquery-1.9.1.min.js



That's all on this list of URL to download or include jQuery files into a web page. I have shared mainly two ways of referencing jQuery files, from the local file system of your web application or directly downloading from one of the popular CDN networks e.g. Google CDN. We have also seen the benefit of including a compressed version of the jQuery file and using a CDN network for hosting jQuery. Finally, we learned the benefit of putting <script> tag at bottom of <body> tag instead of <head>, mainly faster loading of the web page.



Other jQuery and JavaScript tutorials you may like to explore
  • Top 5 jQuery Books Every Web Developer Should Read? (see here)
  • How to get the current URL Parameter using jQuery? (solution)
  • How to use multiple jQuery Date picker elements in one HTML page? (answer)
  • 10 Examples of jQuery selectors for Web Developers (tutorial)
  • How to redirect the web page using jQuery code? (answer)
  • 3 Ways to parse HTML using JSoup in Java? (solution)
  • How to reload/refresh a page using jQuery? (answer)
  • How to prevent double submission of POST data using JavaScript? (solution)
  • How to modify multiple elements in one go in jQuery? (example)
  • How to check and uncheck checkboxes using jQuery? (tutorial)

3 comments:

  1. What does this mean- We are unable to connect to the content delivery network (CDN) that delivers the video stream? and how can you fix it?
    best cdn

    ReplyDelete
  2. The other difference between LAN and WAN, is the speed of the network. The maximum speed of a LAN can be 1000 megabits per second, while the speed of a WAN can go up to 150 megabits per second. This means the speed of a WAN, is one-tenth of the speed of a LAN. A WAN is usually slower because it has lower bandwidth.
    ssl cdn

    ReplyDelete
  3. What is SSL?is this important to have it when u order web hosting?
    level 3 cdn

    ReplyDelete