`src`属性の` onload`イベントを聞く方法はありますか？ （Aフレーム）

Question

属性srcのonloadイベントを聞く方法はありますか？ <a-assets>は<a-sky>と動作しないようですので、私は<a-sky>を使用していますので、私は<a-assets>を使用できません。 <a-assets>と<a-sky>の画像を同時にロードしようとしましたが、1つの画像が最初に読み込まれ、次にもう1つの画像が読み込まれ、読み込み時間が2倍になりました。

src属性を聞く適切な方法は何ですか？だから私はそれのイメージが読み込まれたときにアクションを実行できますか？

（私は<a-sky>のsrc上の画像の読み込み中に空白のシーンを持つ避けたい。）

Answer 1

私はここで働くloadイベント同等のを見つけることができませんが、<a-assets/>はで動作するようになっていますこの場合。

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

注：速記<a-sky/>は資産では動作しない場合は、長いフォームを使用することができますcrossorigin="anonymous"が必要な理由私は知りません。おそらくそうではないはずですが、08/07/16現在です。 * "の追加-層が『Aフレームまたは何-持っている - あなたは』が存在していなかった、あなたはにDOMイベント・ハンドラをアタッチでした『』の属性：

Answer 2

はこの考えてみましょう何か？"   「DOM オブジェクト」生成し、受信イベントが、そのはがない属性：

答えは「ノー」だろう。

したがって、は、の上に構築されているため、これに完全に依存して、定義は「それ以上（またはそれ以下）はできません」。

Answer 3

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