Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

LazyLoad threshold to load multiple sections and not only the next / prev #4576

Open
YusufCaliskanKAFT opened this issue Sep 8, 2023 · 3 comments

Comments

@YusufCaliskanKAFT
Copy link

Hello Alvaro, how can I set the lazyload usage so that the section is loaded before it appears on the screen? We don't have any dots on our site, so in a scenario where we will proceed one by one, for example: When we move from the second section to the third section, I want to load the image of the fourth section after it in the same way, without appearing on the screen. Currently on our site, the default lazyLoading is true and when the section appears on the screen, the img data-src parameter is set to the src parameter and it appears as a huge gray screen and a bad image is created until the image is loaded. We do not want this, we expect your support.

@alvarotrigo
Copy link
Owner

So, let me see if I've understood this correctly.

You want the user to stay stuck no the section until the next section is fully loaded?

So, the user scrolls down, and nothing moves until the content of the next section is loaded?

I think a better approach would be to have a transparent or grey placeholder on the src that will then get replaced by he content of data-src.
Something like src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==".

Or even a loading icon on the image or element you want to load?

@YusufCaliskanKAFT
Copy link
Author

Actually, what I wanted to say was that instead of loading the section when it appears on the screen, the active section on the screen and the next section should be loaded. Since it is loaded only when it comes to the screen, a bad image occurs if it is loaded late. Maybe add a callback like "nextLoad:true". I would be glad if you can help with a solution for this. Have a nice day.

@alvarotrigo
Copy link
Owner

Actually, what I wanted to say was that instead of loading the section when it appears on the screen, the active section on the screen and the next section should be loaded. Since it is loaded only when it comes to the screen, a bad image occurs if it is loaded late. Maybe add a callback like "nextLoad: true". I would be glad if you could help with a solution for this. Have a nice day.

I see.

Yeah, it'd be nice to have a new option so developers can specify how many sections they want to load on the direction of the scroll. Something like lazyLoadThresold: 3

So, for example, scrolling down would load the next 3 sections and scrolling up the previous 3.

I'll add it as a potential enhancement for the library! 👍
Thanks for the suggestion!

@alvarotrigo alvarotrigo changed the title Loading the next section before it appears on the screen with lazyload LazyLoad threshold to load multiple sections and not only the next / prev Sep 13, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants