[Vuejs]-How to get load event in Pictures same as images?

by

0👍

Only set @load on img tag:

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>

Leave a comment