Lazy loading of scripts?

[AustenLamacraft]

I often include javascript demos (using p5.js, say) in my reveal presentations, usually as follows

<script src="assets/my-demo.js"></script>
<figure align="center">
<div id="my-demo" style="display: inline-block; position: relative"></div>
</figure>

This works well, but with many demos it would be good somehow load them lazily and avoid overloading the browser. Is there any way of doing this? The "right" solution may be to include a start button on each one, to avoid them running in the background, but I'd be grateful for any other suggestions.

[palamarchukser]

Hey @AustenLamacraft something like this would be helpful for you?

<button onclick="addScript('assets/my-demo1.js')">start demo1</button>
<div id="my-demo1" style="display: inline-block; position: relative"></div>
...
<button onclick="addScript('assets/my-demo5.js')">start demo5</button>
<div id="my-demo5" style="display: inline-block; position: relative"></div>


<script>
function addScript(src) {
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = src;

    document.head.appendChild(script);
}
</script>

[AustenLamacraft]

Thanks for this! Do you know if there's a way to do it on switching to a particular slide?

[palamarchukser]

maybe something like this

function addScript(src) {
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = src;

    document.head.appendChild(script);
}

Reveal.on( 'slidechanged', event => {
  // event.previousSlide, event.currentSlide, event.indexh, event.indexv
  if (event.currentSlide === 5) {
    addScript('assets/my-demo5.js')
  }
} );

more events for reveal here
https://revealjs.com/events/