search

aFarkas / lazysizes

High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.
MIT License
17.51k stars 1.73k forks source link

Lazysizes does not load the first images you see on the screen. #790

Closed amoralesdesign closed 4 years ago

amoralesdesign commented 4 years ago

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. Captura de pantalla 2020-05-27 a las 15 51 59

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

amoralesdesign commented 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.

aFarkas commented 4 years ago

@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 commented 4 years ago

@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.

jakedowns commented 3 years ago

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