What is PagePreLoader?

In it's simplest form, this mootools plugin hides the content of the page while assets such as webfonts load, then shows the content again. This stops the 'jumps' when custom fonts load in, or when other elements are ready to be shown.

What can i use it for?

By default it adds a 'loaded' key to the hash, which you then update its status when the domready event is fired. (this is added manually so you have great control when it gets fired!) Of cause it doesn't have to be fired on the domready it could be on the load event!

If you have a typekit account, just pass in the typekit id and this will also be added. When the fonts have loaded the typekit status is updated and the content will then only show when both elements are ready.('loaded' and 'typekit')

If you want to do some dom manipulation and again stop an ugly content jump, then you can simply add a custom key, then update it when your work is done. The content will only show when every key is ready.

How does it work?

It works by adding a 'loading' styleheet to the page which overrides the main styles. In this case a simple visibility:hidden on the body does the job of hiding the content.

You can add anything you like in here, you could set certain areas of the page to hide rather than the whole page. the choice is yours!

Once eveything is ready, it then removes the stylesheet reverting back to the original styles.