A-frame: how can I wait with execution until image is loaded?

Question

I need help. I'm doing some A-frame site and I need it to start only when the image for background is loaded. The point is the pictures for sphere bacground, that are 360 deg are enormous - like 20000 x 20000 px, so they load for 10 seconds or something. That depends on the Internet speed. Ad I don't want my animations to execute before the background is fully loaded (and other images for that matter). Then I added several movements of background, and camera, but by the time the background is loaded - they are all executed. I don't want to download jquery unless it's absolutely necessary. Any ideas?

Answer 1

You could use window.onload to only execute your script once everything in the browser renders.

function myAwesomeAnimationScript() {...}

window.onload = myAwesomeAnimationScript;

Wrap all of your script in a function and simply set a reference to it to handle the event.

This is a basic example and will overwrite any other event handler for the specified event, if you want a more elegant solution that respects other handlers look into addEventListener()