Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save monochromer/31a82ef3e5dab16a38637c8e9c59e775 to your computer and use it in GitHub Desktop.
Save monochromer/31a82ef3e5dab16a38637c8e9c59e775 to your computer and use it in GitHub Desktop.
Differential JS Loader

This is an alternative to the Modern Script Loading tchnique, that doesn't need to wait for the load event.

Compatibility

This technique has been successfully tested down to IE9.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script>
  addEventListener('message', function _(e) {
    removeEventListener('message', _);
    var s = document.head.appendChild(document.createElement('script'));
    s.src = (s.type = e.data) == 'module' ? '/js/modern.js' : '/js/legacy.js';
  });
  </script>
  <script type="module" src="data:text/javascript,postMessage('module','*')"></script>
  <script defer src="data:text/javascript,postMessage('text/javascript','*')"></script>
</head>
</html>

Further Considerations

Please note this technique, or any other out there, does not grant that modern module scripts can also load dynamic import(...) within their code.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment