Add ondemand Lazy Loading
calpayne opened this issue · comments
I've had to move to a different slider as your lazy loading isn't on demand. Would it be possible to add this feature? Your lazy loading currently just loads everything in the background
Hello, and thanks for taking this for comment.
Would you please give me the details of the behavior that should have?
The reason currently is done this way is because the images or links don't appear in the complements like pagination or index until the image is loaded, because the animation can not be run until next image is loaded, said that, I felt I was kind of a bad experience to click on a link (from pagination or index), then having to wait until it loads and then runs the transition, because I think that can make the feeling of not working...
On the other side I also though about loading images that way, but for that I would have to use some of vue reactivity, which means that the images would need to be a vue instance in order to control and know their status, using more memory and a small setup time. This is something that will be improved highly in the next major version, which will be developed in vue 3 using the functional API.
Should the spinner appear when trying to transition to non loaded image? in that case could also be a bit problematic because then the spinner would have to be required, which I really didn't want to...
Please share with me your thoughts so maybe we can find a good user experience solution I can implement. And in any case no problem if you need to use another slider, all sliders have pros and cons and all choose the one that suits the need, so no worries! :)
Thanks for taking the time to reply. This slider is awesome btw.
The only reason I'm having to move to a new slider is because of how you lazily load things. Page speed tests are giving back pretty bad scores as hundreds of images are loaded (instead of just the first image of each slider) so my client has requested a change of slider.
I know having slides only load when you navigate to them can make things a bit weird but I'd personally accept the weird things.
The slider I've moved to is called Slick.js so if I haven't explained myself well, looking at their on-demand lazy loading may make more sense.
Thanks :)
Thanks a lot for your kind words, answering is the minimum I can do :)
That lazy loading can work that way because it has no transition, so the image is just loaded when is about to appear leaving it blank if still not loaded, which unfortunately I can't do here because then most transitions would look odd...
On the other side, I think it should not affect the page load time nor score as only the ones defined in lazyLoadAfter could be taken into account for load reliability, and all images are loaded async so should not affect at all...
Is it possible to get a live example so I can test and investigate?
Thanks a lot and cheers!
Honestly, page load with your lazy loading is perfect and fine. I would use this slider every time.
The only issue is tools like Googles page insights emphasises how all of the images are loaded at once. My client saw this and wanted it fixing so I had to use Slicks on-demand loading instead.
I can't give you any live stuff at the moment, sorry.
Thanks
No problem, I will try to investigate by myself.
Thanks a lot anyway for taking time to comment this.
Regards!
Hello, I reviewed the loadings and scores with not very success which I consider unfair somehow. The images are loaded async in background like you pointed, so there is no really impact on page readiness, but as lighthouse (and I guess most others) are listening to any other requests, they consider those requests as a negative impact, no matter other circumstances.
The only solution I could find was just to add a delay of few seconds to start loading the images, which I consider tricky and dirty, something that I'm not up to.
The only way would be to load the next image right after transition starts, which implies other UX issues, like a variable delay time due to different image sizes, spinners when jumping to images with the index or pagination and others.
Said that, unless someone comes with an idea, the behavior you wanted is somehow incompatible. But even still I wanted to thank you the time for participating and letting me know your thoughts.
I will leave this issue open for few weeks so maybe someone comes with an alternative that fits all needs meanwhile I create the new version written in Vue 3 with composition API and support for other sources than just images.
Thank you and regards!!
I completely agree with everything you're saying.
It's unfortunate that speed tools can't seem to take this loading into account when giving scores and feedback.
Thanks