Preload next slide images when lazyloading

[geochanto]

When lazyloading, images get loaded immediately when entering the viewport. This sometimes causes a noticeable jumpy behavior if image is not loaded fast enough.

Is there any method to call with afterLoad and onSlideLeave to preload the next or previous slide images?

For example, if I have 5 slides, I would load images for slide 1, 2 and 5. When navigating from slide 1 -->2, I would call that method to load images for slide 3 to have it ready, and so on.

[alvarotrigo]

When lazyloading, images get loaded immediately when entering the viewport.

The lazy load media elements of the destination section/slide get loaded when you leave the current section, not when you arrive. There's only one exception, which is when you are using non full screen sections and there are multiple sections in the viewport. The ones that are not the active one will be lazyloaded when entering in the viewport.

Is there any method to call with afterLoad and onSlideLeave to preload the next or previous slide images?

There's no such thing at the moment.
The reason why I didn't go for it is because the user might not jump to the next or previous consecutive section in all scenarios. They might go directly from 1 to 4 and skip 2 and 3. Therefore we would be lazy loading images we wouldn't be using.

However, we can perhaps add an option in fullpage.js to do so if the developer needs.
Or even better, make the lazyload method public so developers can have access to it and call it as they wish.

I'll mark it as a possible enhancement! Thanks for the heads up! 👍

[geochanto]

@alvarotrigo Yes I think making the lazyload method public would be a good solution. For example, I have no bullets in my slideshow, so users can only go to next/previous slides with arrows.

[alvarotrigo]

Fixed in version 4.0.28! 🥳
You can now use the option lazyLoadThreshold