Is it possible to add onload event to picture.
Eg code for images in vue.js
<img src="../../assets/hero-mobile.png" alt="Banner" @load="loaded"/>
the methods is triggered when image loaded.
I have tried to add load event for picture but its not working. Is there any way checking the image is loaded or not ?
<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>
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>