如何在图片中获取与图片相同的加载事件？答案

【问题标题】：How to get load event in Pictures same as images?如何在图片中获取与图片相同的加载事件？
【发布时间】：2022-02-07 17:51:19
【问题描述】：

是否可以在图片中添加onload事件。

例如 vue.js 中的图片代码

<img src="../../assets/hero-mobile.png" alt="Banner" @load="loaded"/>

加载图像时触发方法。

我尝试为图片添加加载事件，但它不起作用。有什么方法可以检查图像是否加载？

<picture class="banner-images" @load="loaded">
      <source media="(min-width:992px)" srcset="../../assets/hero-web.png" />
      <source media="(min-width:768px)" srcset="../../assets/hero-tablet.png" />
      <source media="(min-width:576px)" srcset="../../assets/hero-mobile.png" />
      <img src="../../assets/hero-mobile.png" alt="Banner" @load="loaded"/>
</picture>

【问题讨论】：

标签： javascript html image vue.js vuejs2

【解决方案1】：

只在img标签上设置@load：

new Vue({
  el: "#demo",
  data() {
    return {
      isImageLoaded: false,
    }
  },
  methods: {
    loaded() {
      this.isImageLoaded = true
      console.log('>>loaded', this.isImageLoaded)
    },
  },
  watch: {
    isImageLoaded(newValue, oldValue) {
      console.log("New value is: " + newValue)
      console.log("Old value is: " + oldValue)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div>
    <picture class="banner-images">
      <source media="(min-width:992px)" srcset="https://picsum.photos/992" />
      <source media="(min-width:768px)" srcset="https://picsum.photos/768" />
      <source media="(min-width:576px)" srcset="https://picsum.photos/576" />
      <img src="https://picsum.photos/200" alt="Banner" @load="loaded" />
    </picture>
  </div>
</div>

【讨论】：