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

Question

有没有办法收听onload属性的src事件？我无法使用<a-assets>，因为我使用的是<a-sky>，因为<a-assets>似乎无法使用<a-sky>。并尝试同时加载<a-assets>和<a-sky>的图像，但首先加载一个图像然后加载另一个图像，这意味着加载时间加倍。

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

（我想避免在src的{​​{1}}上的图片加载时出现空白场景。）

Answer 1

就像Don说的那样，使用资产上的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

Answer 2

我无法找到可在此处运行的load事件，但<a-assets/>应该适用于此情况。如果简写<a-sky/>不适用于资源，则可以使用较长的格式：

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

  

注意：我不知道为什么crossorigin="anonymous"是必要的。它可能不应该，但截至08/07/16。

Answer 3

考虑一下：*“如果'A-Frame或你有什么'的附加层不存在，你可以将一个DOM事件处理程序附加到”属性“某事？”

答案是“否”：“DOM 对象” 生成和接收事件，但属性不会。

因此，'A-Frame或者你有什么'，必然建立在这些东西之上，因此完全依赖于它，按照定义“不能再做（或更少） ）“。