Defer & programmatically trigger loading of <script> tags.
This is useful for external, third party JS dependencies that you want to embed in a base HTML template but don't want to load & parse until a later, programmatically-invoked time.
Include the laterscript JS tag above your first <laterscript> tag.
<scripttype="text/javascript" src="https://cdn.jsdelivr.net/gh/msmathers/laterscript@master/js/laterscript.js"></script>Use a <laterscript> tag for inline or remote JS scripts. Make sure it has an ID.
<laterscriptid="myscript" type="text/javascript" src="/path/to/file.js"></laterscript>Activate the script via laterscript.load(). Returns a promise that resolves once the script has been loaded & parsed.
laterscript.load('myscript').then(function(scriptEl){console.log('script loaded!')})The <laterscript> element is replaced with a <script> element, which gets parsed and loaded once it hits the DOM.
<scriptid="myscript" type="text/javascript" src="/path/to/file.js"></script><html><head><scripttype="text/javascript" src="https://cdn.jsdelivr.net/gh/msmathers/laterscript@master/js/laterscript.js"></script><laterscriptid="jqueryjs" type="text/javascript" src="https://code.jquery.com/jquery-3.5.0.min.js"></laterscript><laterscriptid="usejquery" type="text/javascript">
$(document).ready(function() {
$('body').html('<h1>jQuery loaded!</h1>')
})
</laterscript></head><body><buttonid="load-query-btn">Load jQuery</button></body><scripttype="text/javascript">(function(){varbtn=document.getElementById('load-query-btn');btn.onclick=function(){laterscript.load('jqueryjs').then(function(){laterscript.load('usejquery')})}})()</script></html>