Check if a jquery has been loaded or not

Given a document, The task is to determine whether JQuery has been loaded or not, If not then load it dynamically using JavaScript. Below are the examples to check:
Approach:

  • First check if it is loaded.
  • If not loaded then load it dynamically, create a script element and add properties like(type, src) to it and then finally append it at the end, inside of the head element.

Example 1: In this example, the JQuery is already loaded so message ‘Script already loaded!’ prints on screen.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        JavaScript 
      | Check if jquery has been loaded, If not then load.
    </title>
    <script src=
    </script>
</head>
  
<body style="text-align:center;" 
      id="body">
    <h1 style="color:green;">  
            GeeksForGeeks  
        </h1>
    <p id="GFG_UP" 
       style="font-size: 19px; 
              font-weight: bold;">
    </p>
    <button onClick="GFG_Fun()">
        click here
    </button>
    <p id="GFG_DOWN" 
       style="color: green; 
              font-size: 24px; 
              font-weight: bold;">
    </p>
    <script>
        var up = 
            document.getElementById('GFG_UP');
        var down = 
            document.getElementById('GFG_DOWN');
        up.innerHTML = 
          "Click on button to check whether JQuery is loaded";
  
        function GFG_Fun() {
            if (!window.jQuery) {
                var el = document.createElement('script');
                el.type = "text/javascript";
                el.src = 
                document.getElementsByTagName(
                  'head')[0].appendChild(el);
                down.innerHTML = "Script loaded succesfully!";
            } else {
                down.innerHTML = "Script already loaded!";
            }
        }
    </script>
</body>
  
</html>

chevron_right


Output:



  • Before clicking on the button:
  • After clicking on the button:

Example 2: The src attribute of script element is changed to sc. In this example, the JQuery is not loaded so message ‘Script loaded succesfully!’ prints on screen after successful loading.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        JavaScript 
      | Check if jquery has been loaded, If not then load.
    </title>
    <script sc=
    </script>
</head>
  
<body style="text-align:center;" 
      id="body">
    <h1 style="color:green;">  
            GeeksForGeeks  
        </h1>
    <p id="GFG_UP" 
       style="font-size: 19px; 
              font-weight: bold;">
    </p>
    <button onClick="GFG_Fun()">
        click here
    </button>
    <p id="GFG_DOWN"
       style="color: green;
              font-size: 24px;
              font-weight: bold;">
    </p>
    <script>
        var up = 
            document.getElementById('GFG_UP');
        var down = 
            document.getElementById('GFG_DOWN');
        up.innerHTML = 
          "Click on button to check whether JQuery is loaded";
  
        function GFG_Fun() {
            if (!window.jQuery) {
                var el = 
                    document.createElement('script');
                el.type = "text/javascript";
                el.src = 
                document.getElementsByTagName(
                  'head')[0].appendChild(el);
                down.innerHTML = "Script loaded succesfully!";
            } else {
                down.innerHTML = "Script already loaded!";
            }
        }
    </script>
</body>
  
</html>

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.