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

Question

有没有办法监听属性的onload事件src？我无法使用，<a-assets>因为我使用的是<a-sky>因为<a-assets>似乎不适用于<a-sky>. 并试图加载的图像<a-assets>和<a-sky>simultanously，但一个图像加载第一，然后其他，这意味着加载时间加倍。

听src属性的正确方法是什么？那么我可以在其中的图像加载后执行操作吗？

（我想避免一个空白的场景，而在图像src的<a-sky>是装载。）

Answer 1

就像唐说的那样，使用crossorigin资产上的标志让它与您的<a-sky>.

一旦你有了它，你就可以像普通 DOM 事件一样收听img.onload/ loaded。下面我将一些代码包装在一个自动挂钩到场景中的 A-Frame 组件中：

<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>

如果您不使用资产，则必须进入材料以获取内部创建的图像：

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