loaded event gets triggered multiple times

[janein]

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.

[justinsthomas]

I'm running into something similar. I'm trying to log success of images loaded in a carousel-type UI to a 3rd party analytics tool in the loaded callback and seeing the event logged multiple times. For example, if I have this within the lazyload config object:

adapter: {
  loading({el}) {
    // give each image a unique ID for test logging purposes...
    el.uid = Math.round(Math.random() * 100);
    console.log(`${el.uid} loading`);
  },
  loaded({el}) {
    console.log(`${el.uid} loaded`);
  }
},
observer: true,
observerOptions: {
  rootMargin: '300px',
  threshold: 0.1,
},

I'm seeing both loading and loaded callbacks called multiple times for the same image. It's not a consistent number of extra calls though, it varies from one page load to the next.

[chrismadrigal]

Experiencing the same exact issue, any solutions?

[libinvbabu]

Having the same issue. Full-sized image is loading twice. Any solutions??

[nonlinearcom]

Same here, all images are loaded twice.

[yoji-kojio]

Same here...

[uto-usui]

Same here... 😢

[desaintflorent]

Hey @hilongjw, Thank you for this wonderful plugin. Do you have any intention on correcting this problem in following months ?

[yuerengui]

Same issue here, but you can use Lazy Component to fix this issue. It works for me.

[johanur]

It's not a problem with the plugin i think. I was facing the same issue.

I solved it by configuring the attempt property of vue-lazyload options object. By default it was set to 3 (Mentioned in the Read me). I set it to 1 and it solved my issue.

If anyone still facing the same issue you can give it a try.

[daltonrooney]

I wasn't able to solve this problem by changing the attempt property as @JohanurRahman suggest. But I've determined that I only experience the issue when multiple components are loading lazy images on the same page. If I limit to just one component I can refresh all day long and never get a duplicate image load. But if I have two components on the page which are both using v-lazy, I will occasionally get duplicate image loads.

[tomastan]

Having similar issues. We have a list of images loaded lazily, so we have a "loaded" event called number of times. Any ideas?

[ITcx1212]

Same here...