loaded event gets triggered multiple times

Hi,

I have multiple lazy images on my page and I want to add a blur effect until they are completely loaded. (showing a blurry low-quality image in the meantime)

It seemed pretty easy working with the property "lazy=loaded" in the css. But I saw that this gets already set when the loading-pic has finished loading.

Then I wanted to solve it with the provided event-listeners. But it seems that those "loaded" events get triggered multple times.

When there is only 1 image on the page I get it 3 times: 1 time for the loading-image and 2 times for the full-sized image.

When there are many images on the page, I get a "loaded" for every image as soon as the first "loaded"-event appears.

Any idea what's wrong? Or any experience how to solve this?

My code looks somehow like this:

<img v-lazy="getLazyObj(size)" ref="image"  />

// ...
getLazyObj(bp: string) {
  return {
    src: this.getSrc(bp), // returns high quality source
    loading: this.getPreviewSrc(bp), // returns low quality source
  };
}
// ...
mounted() {
  (this as any).$Lazyload.$on('loaded', (evt, fromCache) => {
    if (evt.el === this.$refs.image[0]) {
      console.log(evt); // gets logged at least 3 times
    }
  })
}

img[lazy=loading] {
  filter: blur(20px);
}

PS: the full-sized image also gets requested twice.