Loaded event triggering on every scroll event

[rdunk]

I'm using the loaded adapter alongside vue-router. I'm finding that on initial page load the loaded event is triggered once per image, which is expected. After changing routes I find that the loaded event is triggered on every scroll event for every visible image, even if the image has already loaded. Setup like this:

Vue.use(VueLazyload, {
  preLoad: 1.8,
  error: false,
  loading: false,
  attempt: 1,
  supportWebp: false,
  adapter: {
    loaded({ el }) {
      console.log(el);
    },
  },
});

Is this expected behaviour?

Online example here: http://requirebin.com/?gist=rdunk/1371389794270c9672bb15f4e24d40c3

Try changing route a few times and then scrolling, should see the events in the console.

[hilongjw]

Vue.use(VueLazyload, {
  preLoad: 1.8,
  error: false,
  loading: false,
  attempt: 1,
  supportWebp: false,
  adapter: {
    loaded({ el }, formCache) {
        if (!fromCache) {
            console.log(listener)
       }
    },
  },
});

vm.$Lazyload.$on('loaded', function (listener, formCache) {
  if (!fromCache) {
    console.log(listener)
  }
})

[rdunk]

Unfortunately that means the function will only execute the first time an image loads, but not if it is lazyloaded again when returning to a previously visited route. In my case I need to execute a function each time an image is lazyloaded, even if it is cached.

I updated the requirebin example above to use app.$Lazyload.performance() and noticed that when returning to a previously viewed route, the state is always shown as 'loading' rather than 'loaded'.

[hilongjw]

I think it's the listener update did not compare src with old src, it is fixed in v1.0.3

[rdunk]

Still seeing the same issue with v1.0.3 unfortunately.

[rdunk]

Still seeing this with v1.0.6. Easiest way to replicate is to use the following code, and then navigate between routes with images that have already been lazyloaded:

vm.$Lazyload.$on('loaded', () => {
  console.log(vm.$Lazyload.ListenerQueue.map(e => e.state.loaded));
});

You'll see this 'loaded' event is triggered at every scroll event for every element using the directive if that element has been previously lazyloaded, and you'll notice the state of each element is always 'loading'.

I'm trying to work out a fix now, but need to familiarise myself with the project a bit more, so may benefit from someone else weighing in.

[fawadaslam1993]

@rdunk Did you find the solution for that. I am also facing the same problem. As I see this is an older issue but I am still facing issue in 1.2.6

[rdunk]

@fawadaslam1993 Sorry to say but I ended up dropping this library and writing my own lazyloading implementation if I recall correctly.

[fawadaslam1993]

@rdunk Can you suggest to me how you can do your own lazyloading?

[rdunk]

@fawadaslam1993 Managed to dig it out. This is just a replacement for the component, not the directive, so not sure if it will do what you need it to do.

Hope it helps.

https://gist.github.com/rdunk/98c9c2a80dace8e73472b81e3e9ce97b

[fawadaslam1993]

Thanks. I'll try :)