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属性后，就会开始加载。
该挂钩很可能在之后绑定到DOM上，这导致它错过了实际的onload事件，因此它将永远不会被触发。

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

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

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

Answer 2

这同样适用于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>

加载图像时的触发方法（Internet Explorer）

2 个答案: