HTML - defer Attribute

The HTML defer attribute is a boolean attribute that specifies the script is downloaded parallel to parsing the page, and is executed after parsing the page. It is used only for external scripts (should only be used if the src attribute is present).

In other words, when you use the defer attribute in your script tag, it tells the browser to download the script file while it continues parsing the HTML document.

If the src attribute is not present within the <script>, the defer attribute would not affect it.

Syntax

Following is the syntax for HTML defer attribute − 

<script defer></script>

Example

In the following example, we are going to use the defer attribute with the <script> element.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'defer' attribute</title>
</head>
<body>
   <!--HTML 'defer' attribute-->
   <h3>Example of the HTML 'defer' attribute</h3>
   <!--'defer' attribute within the script element-->
   <p>If the 'src' attribute is not present in script element, it would have no effect</p>
   <script src="index.js" defer></script>
</body>
</html>

index.js file

alert("Hello world");

When we execute the script, it will generate an output displaying the alert on the webpage.

Example

Considering the another scenario, where we are going to run to check whether defer attribute is present in the script element element or not. 

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'defer' attribute</title>
   <style>
      div {
         color: green;
         font-weight: bold;
         font-size: 20px;
      }

      button {
         width: 100px;
         padding: 15px;
         cursor: pointer;
         color: white;
         background-color: green;
         border: none;
         border-radius: 5px;
      }
   </style>
</head>
<body>
   <!--HTML 'defer' attribute-->
   <h3>Example of the HTML 'defer' attribute</h3>
   <!--'defer' attribute within the script element-->
   <p>If the 'src' attribute is not present in script element, it would have no effect</p>
   <div id='res'></div>
   <br>
   <button onclick="check()">Check</button>
   <script src="index.js" id="demo" defer></script>
   <script>
      function check() {
         let x = document.getElementById('demo').defer;
         let res = document.getElementById('res');
         res.innerHTML = "Is the 'defer' attribute present within the 'script' element or not? " + x;
      }
   </script>
</body>
</html>

On executing the above script, the output window will pop displying the text along with a click button on the webpage. when the user clicks on the button the event gets triggered and displays a text applied with CSS.

html_attributes_reference.htm
Advertisements