InfoHeap
Tech tutorials, tips, tools and more
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

HTML tag attributes

  • HTML5 - input placeholder
  • html attribute contenteditable
  • script async attribute
 
  • Home
  • > Tutorials
  • > HTML
  • > HTML tag attribute

HTML5 script async – how to load script asynchronously

on Apr 11, 2016

HTML5 script async attribute can be used to load a script asynchronously. with async one can also use onload attribute to attach any javascript code which gets executed once script is fetched and executed.

Code used in this tutorial (file: async_sync_demo.js)

document.querySelector("pre").innerText += "In async_sync_demo.js\n";

Example – script tag without async

<pre></pre>

<script src="/demo2/async_sync_demo.js"></script>

<script>
document.querySelector("pre").innerText += "Outside async_sync_demo.js\n";
</script>
refresh done
try it online

Example – script tag with async and onload

<pre></pre>

<script src="/demo2/async_sync_demo.js" async onload="onload_handler()"></script>

<script>
document.querySelector("pre").innerText += "Outside async_sync_demo.js\n";

function onload_handler() {
  document.querySelector("pre").innerText += "Loaded async_sync_demo.js\n";
}
</script>
refresh done
try it online

Specification and Browser compatibility

SpecificationStatusCategories
async attribute for external scriptsWHATWG Living StandardDOM, HTML5
Desktop
ChromeFirefoxIEEdgeSafariOpera
Yes 8+ Yes 3.6+ Yes 10+ Yes 12+ Yes 5.1+ Yes 15+
Mobile
Android ChromeAndroid FirefoxiOS SafariIE MobileOpera Mobile
Yes 47+ Yes 44+ Yes 5.0-5.1+ Yes 10+ Yes 33+
source: caniuse.com

Suggested posts:

  1. jQuery – load a script with cache enabled
  2. Javascript – ready vs on load event handler example
  3. HTML5 – input placeholder
  4. jQuery how to load a url into an element
  5. Multiple onload handlers using vanilla Javascipt
  6. HTML5 – video tag
  7. HTML5 label tag examples
  8. Javascript – img onload examples
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in Tutorials | Tagged HTML, HTML tag attribute, HTML5, Tutorials

Follow InfoHeap

facebook
twitter
googleplus
  • Browse site
  • Article Topics
  • Article archives
  • Recent Articles
  • Contact Us
  • Omoney
Popular Topics: AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries

Copyright © 2021 InfoHeap.

Powered by WordPress