推迟执行HTML页脚，直到加载Javascript

Question

I am adapting a Wordpress theme for a client.

Within the theme, there is a portfolio feature which loads using javascript. Unfortunately, execution of the javascript is fairly slow, so the result is the footer flashing in the middle of the screen before being pushed to the bottom. This is pretty unsightly - You can see it here: http://bit.ly/1nCH0Br

Is there a way to defer the execution of the footer until the javascript has finished executing (or any better way of solving this unpleasant problem?)

Answer 1

You could make the footer part of the portfolio, so that it doesn't load until the portfolio loads, but that will still leave you with the problem that the page looks blank for the first few seconds of a visit.

A better solution would be to adapt the theme so that it includes a div with a fixed height that displays a loading image and some text like "Loading...". You can adapt the carousel to replace this div. That way you can push the footer down to the bottom of the page, AND give the user some feedback that there's more content loading in the background.

Answer 2

Initialize your footer with css:

position: absolute;
left: -10000px;
opacity: 0;

and set the correct values when the page has loaded. You can do this with having 2 classes, one for preloads and another for after load.

The reason of not just hidding the footer with css is that your js can still work with width and height values