Метод запуска при загрузке изображения (Internet Explorer)

Question

Я хочу вызвать метод при загрузке изображения. К сожалению, .load не работает для изображений в Internet Explorer. Есть ли какое-то решение?

Вот мой код:

<img
  ref="image"
  :src="src"
  :alt="alt"
  @load="onLoad"
/>

скрипт:

methods: {
  onLoad() {
    console.log('trigger me when image has fully loaded');
  },
}

Answer 1

Это прекрасно работает и в IE

<img id="img" src="http://lorempixel.com/400/200/" alt="" />
<script>
    function myFunction(){
        console.log('image loaded')
    }

    document.getElementById('img').addEventListener('load', myFunction)
</script>

Answer 2

Проблема заключается в том, что IE загружает изображение, даже когда элемент изображения еще не присоединен к DOM, но определен как неприсоединенный элемент img. Как только атрибут src установлен, загрузка начинается.
Хук, скорее всего, связан после , когда элемент присоединяется к DOM, что приводит к тому, что он пропускает фактическое onload событие, и, следовательно, он никогда не сработает.

Решением может быть жесткое кодирование в нем обработчика загрузки для Internet Explorer.

<img onload="
          var event = new Event('imageloaded',{
                                          currentTarget: this
                                 });
          document.body.dispatchEvent(event);">

Это вызовет событие в элементе body, в который загружено изображение.