Preloading an HTML page – How to delay the page load till the Javascript libraries are loaded

Introduction

Working on an HTML page that loads heavy JavaScript files (jQuery, Pikachoose, Dojo, Prototype, …) may make the page loads being delayed which is a problem to be solved by compressing all JavaScript files before deploying to production environment.

Some JavaScript libraries (like Pikachoose) make you write regular HTML tags which is transformed into special effects/elements when the JavaScript Library continue to load which may result into unhappy results. It may result into corrupted layouts which continue to show till the JavaScript library being loaded by the browser and executed according to its sequence.

Pre-loading the HTML page

The solution of this problem is very straightforward. Just we need to delay the display of the whole page until the browser finishes loading the JavaScript files/resources needed.

This is done by using the following JavaScript code snippet :

<script type="text/javascript">
//<![CDATA[
with (document.documentElement.style) {

visibility = ‘hidden’;
overflow = ‘hidden’;

oldinwdowonload = window.onload;
window.onload = function() {
visibility = ”;
overflow = ”;
if( oldinwdowonload )
oldinwdowonload();
};
}​
//]]>

The preceding example is just an JavaScript lines to hide the whole document element until the page load event fire.

Also note that it saves the current onload page event, (in case it was set) to call it later after displaying the document element again.

It worked on the 3 browsers, Firefox 4, IE9 & Chrome.

Have Fun 🙂

Advertisements

One response to “Preloading an HTML page – How to delay the page load till the Javascript libraries are loaded

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s