Alexandre,
>i have a page quite heavy in content: it's a summary page in a CMS, so i
>cannot really reduce anymore the dom (like splitting or paging content), so
>i would like to introduce some page transition, like a "loading" screen,
>for instance, or an intermediary screen giving some kind of smoother feel
>to the user experience. Here is my question: what would be the best way
>to hide the page with a "loading" screen until the dom is fully loaded and
>rendered by the browser?
The easiest way is to do something like:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
window.onload = function (){
// hide the loading message
$("#loading").hide();
// show the real page content
$("#mainContent").show();
}
</script>
</head>
<body>
<div id="loading">Loading....</div>
<div id="mainContent" style="display: none;">
..........
The rest of you page goes here
..........
</div>
</body>
</html>
I used the onload event just because you said you wanted the *fully* loaded
(which I assumed you meant images.) If you don't care about images being
loaded, you can use $(document).ready() instead.
-Dan
