Closed amoralesdesign closed 4 years ago
I've solved this by putting in this directive for lazysizes and vuejs: https://www.npmjs.com/package/vue-lazysizes
In my case I have a Laravel and vuejs project compiled all with webpackjs.
Since lazysizes is called within the id=app of all my web, it seems that there was a conflict between lazysizes and vuejs.
With this I solved it, I hope it helps people.
@amoralesdesign
Thanks for your information. My question would have been wether you use the attr change plugin and if yes and still have problems, wether you can simply re-add the lazyload
class inside of vue lifecycle hooks yourself. (For my personal info: Did you use the attr change plugin?)
@amoralesdesign Thanks for your information. My question would have been wether you use the attr change plugin and if yes and still have problems, wether you can simply re-add the
lazyload
class inside of vue lifecycle hooks yourself. (For my personal info: Did you use the attr change plugin?)
No, I didn't know about the existence of that plugin inside lazySizes. I'll try it out later. Thank you.
I'm running into this with a laravel vue project as well, adding that plugin didn't seem to help UPDATE: i needed to delay init and call it after all my vue components were mounted via https://github.com/aFarkas/lazysizes/issues/311#issuecomment-307078770
Lazysizes does not load the first images. They are the first photos that the user sees as soon as they land on the page.
Right after the blank photos, lazysizes works perfectly. But even if you scroll up or down lazysizes never load the first rows of images.
Every photo that does not load has the lazyloading class, but never changes its class to lazyloaded
I'm using VueJs ^2.5.17. I've tried this with Google Chrome and Safari.
It looks a lot like this problem: https://github.com/aFarkas/lazysizes/issues/311