¿Es posible agregar un evento de carga a la imagen?
Por ejemplo, código para imágenes en vue.js
<img src="../../assets/hero-mobile.png" alt="Banner" @load="loaded"/>los métodos se activan cuando se carga la imagen.
He intentado agregar un evento de carga para la imagen, pero no funciona. ¿Hay alguna forma de verificar que la imagen esté cargada o no?
<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>Solo configure @load en la etiqueta img :
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>