|
function registerComponent() {
Alpine.data('observeImages',function() {
return {
random(min,max) {
return Math.floor(min + Math.random() * (max-min));
},
loadImage() {
const id = this.random(100,1000);
const width = this.random(300,600);
const height = this.random(200,500);
const img = this.$refs.img;
img.width = width;
img.height = height;
img.src = `https://picsum.photos/seed/${id}/600/400`;
img.style.opacity = 0;
img.addEventListener('load',() => img.style.opacity = 1,false);
},
}
});
}
document.addEventListener('alpine:init',registerComponent,false);
|
