有沒有辦法聽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或什么具備的，你，”正在必然建立在這些東西上面 ，因此完全依賴於它，通過定義“可以做沒有更多的（或更少）。”