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

Question

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

侦听src属性的正确方法是什么？ 因此，当其中的图像已加载时，我可以执行一个操作？

（我要避免在加载<a-sky>的src上的图像时出现空白场景。）

Answer 1

就像Don所说的crossorigin ，在资产上使用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" 。 可能不应该这样，但截至16年8月7日。

Answer 3

考虑一下：*“如果不存在“ A框架或您拥有什么”的附加层，您可以将DOM事件处理程序附加到“某物的属性 ”吗？”

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

因此，“A-Frame或什么具备的，你，”正在必然建立在这些东西上面 ，因此完全依赖于它，通过定义“可以做没有更多的（或更少）。”