alexchenco alexchenco - 4 months ago 11
Javascript Question

Is there a way to listen to the `onload` events of `src` attributes? (A-frame)

Is there a way to listen to the

onload
events of
src
attributes? I can't use
<a-assets>
because I'm using an
<a-sky>
because
<a-assets>
don't seem to work with
<a-sky>
. And tried loading the images of
<a-assets>
and
<a-sky>
simultanously, but one image loads first and then the other, which means that the loading time is doubled.

What's the proper way of listening to the
src
attribute? So I can perform an action when the image in it has loaded?

(I want to avoid having an blank scene while the image on the
src
of the
<a-sky>
is loading.)

Answer

I can't find a load event equivalent that works here, but <a-assets/> is supposed to work in this case. If the shorthand <a-sky/> doesn't work with assets, you can use the longer form:

<a-scene>
  <a-assets>
    <img id="my-asset" src="https://..." crossorigin="anonymous">
  </a-assets>
  <a-entity geometry="primitive: sphere;
                      radius: 5000;"
            material="src: #asset-id;
                      side: back;">
  </a-entity>
</a-scene>

Note: I don't know why crossorigin="anonymous" is necessary. It probably shouldn't be, but it is as of 08/07/16.