Using Javascript DOM to assign objects + Preloading

I’m using Javascript on Scene Load to set the objects (text, image) etc of the elements dynamically in the scenes of a document. I’ve done this in the past with no problems at all. My question is around pre-loading. When I use javascript to set a graphic element, for example, to an image, does that cause the asset to load at that moment?

The other part of it, is it possible to set the file of a video element (using the element on not inner html). If so, how would I set the mp4 vs the OGV file of it? And the same question with an audio element.

1 Like

If you have the image resource set to preload, then it will have already been loaded before any On Scene Load events. If the resource is not set to preload (or not controlled by Hype), then it is up to the browser to decide when to load it - usually when it has been added to the DOM or when it is displayed (last I checked there was variation on how they behaved).

There’s a few different ways to dynamically set the src of a video element, either by adding a single src attribute to the <video> tag itself, setting the innerHTML to <source> elements, or by using the .appendChild() call to add elements. In implementing Hype’s runtime I recall there are some issues with resetting these values; ultimately we clear out the sources via setting .innerHTML to “” and then add source elements via the appendChild() method, if that helps.

If you plan to do dynamic behavior here, I recommend not using Hype’s video elements since you’ll be fighting against the Hype runtime. Setting this up On Scene Load should work.

1 Like