vue-lazyload
vue-lazyload copied to clipboard
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.
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.
Experiencing the same exact issue, any solutions?
Having the same issue. Full-sized image is loading twice. Any solutions??
Same here, all images are loaded twice.
Same here...
Same here... 😢
Hey @hilongjw, Thank you for this wonderful plugin. Do you have any intention on correcting this problem in following months ?
Same issue here, but you can use Lazy Component to fix this issue. It works for me.
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.
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.
Having similar issues. We have a list of images loaded lazily, so we have a "loaded" event called number of times. Any ideas?
Same here...