javascript - 加载图像时的触发方法(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

问题在于，即使图像元素尚未附加到 DOM 但定义为未附加的 img 元素，IE 也会加载图像。一旦设置了 src 属性，加载就会开始。
Hook 很可能在​​元素附加到 DOM 后绑定(bind)，这会导致它错过实际的onload 事件，因此它永远不会被触发。

解决方案可能是为 Internet Explorer 在其中硬编码一个 onload 处理程序。

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

这将在加载图像的 body 元素上触发一个事件。