Philip

Philip's blog

0%

javascript-lazy-load-script

Posted on Edited on In
Symbols count in article: 80 Reading time ≈ 1 mins.

How to lazy load a script in JavaScript?

  • use defer attribute in script tag.
    1
    <script src="path/to/script.js" defer></script>
  • use async attribute in script tag.
    1
    <script src="path/to/script.js" async></script>
  • use window.load event to load script.
    1
    2
    3
    4
    5
    6
    7
    <script>
    window.addEventListener('load', function() {
        var script = document.createElement('script');
        script.src = 'path/to/script.js';
        document.body.appendChild(script);
    });
    </script>
  • use document.DomContentLoaded event to load script.
    1
    2
    3
    4
    5
    6
    7
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        var script = document.createElement('script');
        script.src = 'path/to/script.js';
        document.body.appendChild(script);
    });
    </script>