When loading my pages, the top container (in which my site logo, a picture and a simple site navigation) comes in view after an annoying delay. I’m using Foundation 6, and a container, with Chroma and some columns to build a top bar. Yesterday everything was going smoothly, today this top container is delayed. Anyone to have a clue and help me out? See for yourself, especially the MUSIC page: www.jennertest.nl
At a guess the Image Fit stack and Chroma are not playing well together. Take out image fit and leave just the picture, republish, clear browser cache and reload it.
Try the opposite too, leave in image fit and remove chroma.
You are just seeing a flash of unstyled content as the page content loads. Foundation tries to display the page as quickly as possible but this means that not all of the code is loaded when it first displays.
The solution is simply to add a Preloader, you can find it my clicking the blue plus button in the Features area of site styles. This will just prevent the page from displaying until all the code is loaded if that is how you prefer it.
If you set the icon to none and the background to white then no one will even know it is there (i.e. you don’t have to have an animated loader icon)
2 Likes
@pmjd and @tav: thanks for the reply and the suggestions. I have replaced the Image Fit stack by a normal Picture stack; it didn’t help. Nor did clearing the browser cache. I’d rather not remove Chroma, for I want a sticky navigation top container. Or is there another stack to make columns and bars sticky?
I have also applied the Preloader. The only thing it does was making the pages fade in from a white background. The delayed launching of the top container with the navigation was not changed. It seems that the rest of the page is loaded first and then the top container. Can’t figure out yet if this is related to Chroma (which you may expect to be not). Is someone from Big White Duck on this platform? I asked them on their site, but got no answer up till now.
The problem is on all 3 pages, but most significant on the Music page; this page has to load the most content, f.i. 3 mp3 files. Something to do with that?
That is me - I’ve not got an email or support ticket from you though that I can see. If you want to email me (support [at] bigwhiteduck [dot] com) then we can sort things out. You can zip up and email me the problem page if you like, that would help a lot.
I’m surprised the preloader didn’t work though as it shouldn’t fade the page in until everything is loaded.
1 Like
Oh sorry Andrew, should’ve known that.
Right now I am trying lots of tunings in Chroma and other stacks. I have skipped the Animate stack. Nothing helps. Still the top container loads only after the rest of the page content is completed; indeed, also when applying a preloader. Quite unusual, isn’t it?
It seems to me that the topcontainer (with Chroma and the Images and the simple site navigation) is a bit “on it’s own” or “out of reach”: all following containers have a site wide background that is lightgrey (via a Swatch). I did that the same with the top container, but here the background is darker grey, as you can see on a bigger screen (at all 3 pages) at the sides of the red top container: www.jennertest.nl
I will try to zip the page (don’t know how yet…) and mail this to you. But first I have to do some cooking here, it’s diner time in The Netherlands… 
1 Like
Not necessarily. If you have the Chroma set to pad the body content down (so that your floating header does not cover other page content) then it has to wait until all the page is loaded before calculating the space that it needs.
There are always solutions though and I’m sure we can sort it out. I am away tomorrow but I will look at it as soon as I can.
To send me just one page you can duplicate the project file and then delete the other pages or if it is not too big then just send me the whole project file if its easier.
1 Like
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.