vue-lazyload
vue-lazyload copied to clipboard
hilongjw
lazy state not changing to loaded
I am loading a vue component, but the image lazy state is not changing to loaded, until and unless I am hovering over the component. The images are present in the viewport. The issue is observed even after the images have been downloaded. I am using the same component in other pages, but there the issue is not observed.
This is how it's used
Here we are initializing it
Vue.use(VueLazyLoad, { loading: "./Default_Image.png", error: "./Default_Image.png" })
HTML
The page on which we are using is displayed in a tab. I don't think that should be a problem though. Not able to figure out what is wrong. :(
I am seeing the same issue in my project. My placeholder styling stays in place indefinitely, even after the image is loaded, but any hovering or scrolling events quickly changes the state and my image appears.
@rickhall Are your images by any chance, in a page that is rendered before the user lands on it ?
No.
You can see the same bug in this demo: http://hilongjw.github.io/vue-lazyload/
You can just keep clicking "Switch" until you see some images come up an remain the "spinner" icon. When that happens, then scroll the window and you'll see the actual image appear.
I just looks like the library is not reacting to load events properly.
I'm not sure if it was fixed, since I moved away from the approach and did it a different way.
Thanks for the reply @rickhall ! I also managed to workaround it by changing some if conditions on our code.
While trying to fix it, I had the impression that changing the options attempt and throttleWait had an impact on it. Don't know if that's helpful for anyone trying to fix it in the future.
I was having the same issue as @rickhall . setting observer: true appears to solve it for me.
The fact that this issue is clearly visible in the demo is sort of a hint that it is a bug. It would be nice to have it fixed, but I just implemented lazy loading myself, since it is not that difficult to do.
@rickhall Yeah I think this repo might not be maintained anymore. Would you be able to share your solution?
@tarponjargon I didn't create a generic component, I just did something specific for my situation. Effectively, I just used a class marker to mark my non-rendered elements, listened for scroll and window resize events, when I received events, checked if the bounding box of any non-rendered elements intersected the visible viewport, if so I loaded its image and removed the non-rendered marker.