Есть ли способ прослушивать события onload атрибутов src? (Рама)

Есть ли способ прослушивать события onload атрибутов src? Я не могу использовать <a-assets>, потому что я использую <a-sky>, потому что <a-assets> не работает с <a-sky>. И попытался загрузить изображения <a-assets> и <a-sky> одновременно, но сначала загружается одно изображение, а затем другое, что означает, что время загрузки увеличивается вдвое.

Как правильно прослушивать атрибут src? Итак, я могу выполнить действие, когда изображение в нем загрузилось?

(Я хочу избежать пустой сцены, пока загружается изображение на src из <a-sky>.)


javascript aframe
person alexchenco    schedule 08.08.2016    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Я не могу найти эквивалент события 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". Наверное, не должно быть, но это по состоянию на 07.08.16.

person Don McCurdy    schedule 08.08.2016

arrow_upward
5
arrow_downward

Как сказал Дон, используйте флаг crossorigin на ресурсе, чтобы заставить его работать с вашим <a-sky>.

Как только вы это сделаете, вы сможете слушать img.onload/loaded, как обычное событие DOM. Ниже я оборачиваю некоторый код внутри компонента 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

person ngokevin    schedule 08.08.2016

arrow_upward
0
arrow_downward

Учтите следующее: *"Если бы дополнительных слоев "A-Frame или что у вас есть" не существовало, могли бы вы прикрепить обработчик событий DOM к "атрибуту" что-то?"

Ответ будет "Нет": "DOM объекты" генерируют и получают события, а их атрибуты — нет.

Таким образом, «А-Фрейм или то, что у вас есть», будучи обязательно построенным поверх этих вещей и, следовательно, полностью зависящим от них, по определению «не может сделать больше (или меньше)».

person Mike Robinson    schedule 08.08.2016