有没有办法听src属性的onload事件？ （一个框架）

Question

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 1

Like Don said, use the crossorigin flag on the asset to get it working with your <a-sky> .

Once you have that, you can listen to img.onload / loaded like you would with a normal DOM event. Below I wrap some code inside an A-Frame component that automatically hooks into the scene:

<script>
  // Do something on asset load.
  AFRAME.registerComponent('do-on-asset-load', {
    schema: {
      src: {type: 'selector'}
    },

    init: function () { 
      var el = this.el;
      var assetEl = this.data.src;
      assetEl.addEventListener('load', function () {
        // Do something with your element.
      });
    }
  });
</script>

<a-scene>
  <a-assets>
    <img id="my-asset" src="https://..." crossorigin="anonymous">
  </a-assets>
  <a-sky src="#my-asset" do-on-asset-load="#my-asset"></a-sky>
</a-scene>

If you weren't using assets, you'd have to reach into the material to grab the internally-created image:

document.querySelector('a-sky').components.material.material.map.image

Answer 2

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.

Answer 3

Consider this: *"If the additional-layers of 'A-Frame or what-have-you' did not exist, could you attach a DOM event-handler to "an attribute of" something?"

The answer would be "No": "DOM objects" generate and receive events, but their attributes do not.

Therefore, 'A-Frame or what-have-you,' being necessarily built on top of these things and therefore wholly dependent upon it, by-definition "can do no more (or less)."