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

afterLoad always fires first index=1 even accessing the page on anchor=3 #2519

Closed
medfx opened this issue Jan 21, 2017 · 9 comments
Closed

Comments

@medfx
Copy link

medfx commented Jan 21, 2017

Hi, I have a question about the afterLoad callback:

When I open a deep link to a fullpage.js site (e.g. http://alvarotrigo.com/fullPage/#3rdPage) the afterLoad callback get once called with index = 1 then the page scrolls to the third section and afterLoad will be called again with index = 3. So no matter where I really wanna go, the first section will always load fully once?

I'm asking about this behavior because I'm lazy loading heavy image backgrounds with the help of the afterLoad callback. But if the user doesn't enter the page on the first section, the images load anyway because afterLoad always fires on the first section first.

How can I determine if a user is just passing through the first section on his way to another section first, or if he is loading the first section to stay on it?

I would provide a jsfiddle but I dont know how to set a deep link into the jsfiddle result frame.

@alvarotrigo
Copy link
Owner

I can't reproduce your issue:
http://jsfiddle.net/97tbk/1658/

Closed until an isolated reproduction is provided as detailed in the reporting issues guidelines and the issue skeleton.

@medfx
Copy link
Author

medfx commented Jan 21, 2017

It does not work if you do it with the "active" class. The user has to to come through a deep link.

Ok forget jsfiddle. Codepen is much better here:
Resultframe: http://s.codepen.io/boomerang/9cd93b5751f5baef8ddc722bd1d7d6071485015862889/index.html#section3
Codepen: http://codepen.io/anon/pen/zNwqPL

Edit:
Hm... the direkt link to the codepen result frame does not always work. Somehow the url changes.
You have to open codepen and copy the result-iframe src every time new to append the anchor. (e.g. #section3

@alvarotrigo
Copy link
Owner

Oh, you mean by accessing through the anchors. I see.
I'll open it again and research it a bit more.

@medfx
Copy link
Author

medfx commented Jan 24, 2017

I also tested it with the CSS .active class. When you enter directly e.g. the third section (#thirdSection) fullpage.js toggles the active class on the home/first section for a very short time.

Also the images implemented with lazy-loading ("data-src") load on the home/first section, when you enter the page on any other section.

The option "animateAnchor" has no consequence on the problem.

@alvarotrigo
Copy link
Owner

alvarotrigo commented Jan 24, 2017

I also tested it with the CSS .active class. When you enter directly e.g. the third section (#thirdSection) fullpage.js toggles the active class on the home/first section for a very short time.

I don't think that's the case. You are just probably seeing the 1st section for a moment as the library needs to apply its css and classes. If you initialize fullPage.js on the header on document ready you shouldn't get the blink. This can clearly be seen in my example when changing the Javascript onLoad or onDomready.

If you think that's the case, then you'll have to provide some prove of it regarding the addition of the active class.

@medfx
Copy link
Author

medfx commented Jan 24, 2017

You have to come trough a anchor link. It does not work if the active class is already assigned to a section.

I uploaded the files onto a normal webserver so we don't have the problem with the changing url of the codepen/jsfiddle iframe and can attach anchor links.

http://www.arisur.info/fullpage/index.html#Section3
So we enter here directly trough the anchor #Section3. None of the sections has the active class preassigned.
Console says:

afterLoad: sectionIndex 1
section-1 has active class
afterLoad: sectionIndex 3

Also the image on section 1 which has no src only data-src for lazy loading will load, if we enter the site directly on #Section3. (You can check this in developer tools network tab).

If we set the option animateAnchor: false the site will directly load section 3. No blinking no jumping, but afterLoad will still trigger on section 1, the active class will be toggled and the image on section 1 loads.

Edit: Oh now I understand where I was unclear. I tested the automatic toggle of the active class. I didn't ment I tested this behavior with the preassigned active class.

@alvarotrigo
Copy link
Owner

Edit: Oh now I understand where I was unclear. I tested the automatic toggle of the active class. I didn't ment I tested this behavior with the preassigned active class.

Yeah right. Then we agree :)
I'll investigate the issue regarding the URL anchor link and the after load whenever I have time. I'll mark it as a bug.

@alvarotrigo alvarotrigo changed the title afterLoad always fires first index=1 even if entering the page on index=3 afterLoad always fires first index=1 even accessing the page on anchor=3 Jan 24, 2017
alvarotrigo added a commit that referenced this issue Mar 10, 2017
@alvarotrigo
Copy link
Owner

Fixed on the dev branch 2.9.4

@alvarotrigo
Copy link
Owner

Fixed in the latest release 2.9.4

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