Add smart lazy loading

[ghost]

I am wondering if it would be possible to add this feature to the already in place lazy loading.

Smart lazy loading would load neighbouring images/slides based on the direction of the user’s movement.

I am thinking this could be achieved by making an array of the slides in a section, detect what slide is currently shown and load the previous two and next two slides immediately from that array but no other images/slides from the array.

Like this when going through the slides a bit faster and using lazy load, users would not have to wait for the current slide to be loaded and would also not see the loading animation of the current slide.

Perhaps the amount of images/slides to be smart lazy loaded could be controlled through an option setting of the smart lazy loading function so that developers can adjust the amount of images to load before and after the current slide.

Currently when using the lazy load in place by fullPage things look like this. The user can actively see the image loading as well as is being told bottom left of browser that the image is loading.
Basically the use is told to wait.

[alvarotrigo]

It can be done, but problem is when users access directly to the section/slide by using the navigation or a menu.

[ghost]

I was thinking of that as well since fullPage provides that functionality, going directly to a section or slide by the URL or navigation. Hence loading the previous and next two slides of that specific URL.

For that use case I guess users will have to wait for the entire site to be loaded as well and that can be done either with a loading animation or some anti-fouc technique, basically showing the user the site is loading and while doing so the neighbouring slides in question are also being loaded.

Would that cause too many HTTP requests? What are your concerns or worries or thoughts about such an approach please? Trying to get more info on such a smart lazy loading approach so if I manage to do this just for slides I will know what to look out for or what to strictly avoid.

Thank you.

[alvarotrigo]

No, the problem is, it takes the same time to go from section 2 to section 3 than from section 1 to section 5.
You are mentioning that currently you can see how the image loads when going from one to another section. Exactly the same would happen if you use a menu and you lazy load images on the adjacent sections, as there's no enough time for the image to be loaded before you get to the section.

[ghost]

I am not sure if I understand you 100%. You talk about the time it takes for fullPage to go from one section to another (1 to 2 or 1 to 5) and that this time is fixed. That I understand.

What about if I only fire such a smart lazy load function once fullPage has reached the section the users wants to go to either through URL or navigation? I am more thinking about once fullPage has reached a section with slides such a function could be called. So this would be for slides excursively basically.

Users will most likely be occupied with taking in the information that is being displayed before they have the urge to go to the next slide. While they are occupied with that the smart lazy load function could grab the adjacent slides from both directions. As far as I know slides can be scrolled left or right, but not up or down, right?

Example:
User loads this link. website.com/#photos/#slide13
Once fullPage has come to that section and to that slide and is finished with the "travelling animation" the smart lazy load function kicks in and grabs slides 11, 12, 14 and 15 respectively.

Now if the user goes to website.com/#photos/#slide14 slide 14 is already loaded.
If the user goes to website.com/#photos/#slide12 the slide 12 is also already loaded.

And naturally being either on website.com/#photos/#slide14 or website.com/#photos/#slide12 slides 10 or 15 would be grabbed by the smart lazy load function.

Does that make sense?

(I think I read somewhere in the documentation that the "travelling animation" can also be turned off, meaning when loading a URL fullPage displays the content of that URL directly without the animation of going through the sections and slides, what is this option again please if it exists?)

[alvarotrigo]

I've marked it as an enhancement, so eventually I'll take a look at it for some future version of fullpage.js

[ghost]

Regarding "travelling animation" I have found it again!

animateAnchor: (default true) Defines whether the load of the site when given an anchor (#) will scroll with animation to its destination or will directly load on the given section.

As far as I know reducing the amount of HTTP requests boots search engine ranking (don't quote me on that!), that is really the reason I am trying to add this functionality to fullPage. (PhotoSwipe.com has this and it works great even when going through the slides/photos really fast.)

Do you think, while I wait for the next version or this enhancement this to happen, such an enhancement can be added by myself through an external function without touching the fullPage source?

Or is fullPage at the moment how it is too restrictive to actually accept something like that? I feel like I like to give it a try and see how far I get. Making an array of slide objects, checking current slide and loading adjacent slides would not really have to touch core fullPage functionality, would it?

Or am I understanding this completely wrong and I will indeed need to go into the source and change things there?

[alvarotrigo]

Feel free to commit a pull request if you find a good solution.
I don't think any array is necessary. Just using prev and next jquery methods should be enough.

[ghost]

Ahhh, great tip! Thank you!!

[BenRacicot]

This is a great discussion. I'm running into a situation where the last sections on my pages are half sections. When you visit these sections directly via navigation the section above them visibly has not loaded because it hasn't been visited.

I suspect that anyone using smaller-height sections with fp-auto-height will also be seeing this issue (when users navigate directly to the section/slide)

One idea could be to add a data-load-on-ANCHORNAME to any section you want to load when data-anchor="ANCHORNAME" is visited . Thus overriding lazy loading. Then we could manually load sections.

[alvarotrigo]

One idea could be to add a data-load-on-ANCHORNAME to any section you want to load when data-anchor="ANCHORNAME" is visited . Thus overriding lazy loading. Then we could manually load sections.

Or detect when any section will be in the viewport on the next scroll up/down.

[alanalvarado]

smart lazy loading is a great idea, why not simply showing a progress bar, thus delaying the scroll to the next section until it is fully loaded?

[alvarotrigo]

smart lazy loading is a great idea, why not simply showing a progress bar, thus delaying the scroll to the next section until it is fully loaded?

I think a better user experience would be loading the section and displaying the loading there.
Perhaps fullPage.js can provide with a class such as "fp-is-loaded" on each section/slide so the developer can then decide when to show/hide a loader (or do whatever they want to do instead)

This way they can have total freedom on how they develop it.
I don't think fullPage.js should get into the business of creating a loader animation :)

[brandonalexandertong]

Coming over to this thread to continue the conversation, has anyone been able to implement smart lazy loading using callbacks and/or the custom classes?

I’m not sure how fullpage is doing lazy loading, so I’m unsure how I would “tell” it to load a certain image before the image enters the viewfinder. Even the ability to load an entire section once that section is scrolled to would be incredibly helpful here! In lazysizes there is a method that you can call to tell it to preload an image, though unfortunately I was unable to get lazysizes to work with fullpage, and would like to avoid using an outside lazy loader if possible.

[alvarotrigo]

I’m not sure how fullpage is doing lazy loading, so I’m unsure how I would “tell” it to load a certain image before the image enters the viewfinder.

You can look at the code :)
https://github.com/alvarotrigo/fullPage.js/blob/master/src/fullpage.js#L2074

though unfortunately I was unable to get lazysizes to work with fullpage, and would like to avoid using an outside lazy loader if possible.

Lazy load libraries tend to rely on the scroll position, although I believe you can configure some to rely on other values, like the translate3d Y position that fullpage.js uses on the fullpage container.
However, if you want to make things simple, just enable the scrollbar on fullpage.js by using the optionscrollBar:true and any lazy load library should work.

[alvarotrigo]

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