Javascript Page loading message with jquery / javascript for web pages.

27.7.10
Avoid broken site being shown to users while site is loading. Show a loading message while images, backgrounds etc are loading and show the site when everything is ready to be displayed.

This can be done in easy steps
First we have to inject some loading html into page using javscript. This has to be done just after title tag

<title>Smart Page</title>

<script type="text/javascript">

document.write('<div id="loading"><p>Hi,welcome to Smart Page.Please wait while contents are <b>LOADING</b>...</p></div><style type="text/css">#wrapper960{visibility:hidden}#loading{margin:100px auto;width:480px;border:5px solid #777;padding:20px;text-align:left;}</style>');

</script>


Now the page shows loading div only and hides wrapper960, which should be name of the div that contains whole site. Once page and graphics are loaded we can hide loading and show the page again, this can be done using script


<script type="text/javascript">

$(window).load(function() {

$('#loading').fadeOut(500);

$('#wrapper960').hide();

        $('#wrapper960').css('visibility','visible');

$('#wrapper960').fadeIn(2000);

});

</script>


This example uses jQuery so you have to include jQuery using

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">script>



You can see a demo at www.sabithpocker.com there i have done a bit more by counting and monitoring the loading of images and css files. Its like a debug console there, but you can make meaningful loading message by just showing logo and short description, just don't make it too large.

Related Posts by Categories



Widget by Hoctro | Jack Book

3 Responses:

Anonymous said...

That was really helpful, Thank you.

Anonymous said...

That was really helpful , Thanks

Anonymous said...

that was really helpful, Thank you