Fullpage.js: afterLoad always fires first index=1 even accessing the page on anchor=3

Created on 21 Jan 2017  路  9Comments  路  Source: alvarotrigo/fullPage.js

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.

bug fixed on dev

All 9 comments

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.

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

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

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.

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.

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.

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.

Fixed on the dev branch 2.9.4

Fixed in the latest release 2.9.4

Was this page helpful?
0 / 5 - 0 ratings

Related issues

vanloc0301 picture vanloc0301  路  5Comments

rslcdmc picture rslcdmc  路  3Comments

villain2 picture villain2  路  3Comments

ortonomy picture ortonomy  路  3Comments

festwertspeicher picture festwertspeicher  路  4Comments