Теория
Итак, у нас в HTML есть два слоя - в то время когда один открыт (id="load"), другой должен быть скрыт (id="total"). Потом, когда контент в скрытом слое (id="total") загрузится, то должна произвестись замена - невидимый (id="load") становится видимым, а видимый (id="total") - невидимым. Замена производится на JavaScript. Итак… Поехали:
Это мы вставляем между
Code
<!-- Loader -->
<!-- JS -->
<script type="text/javascript">
var check_preload;
function preload_page() {
if(check_preload) {
document.getElementById("total").style.visibility = "visible";
document.getElementById("load").style.visibility = "hidden";
}
}
</script>
<!-- JS finish -->
<!-- CSS -->
<style type="text/css">
#total {
visibility: hidden;
}
#load {
position: absolute;
left: 50%;
top: 50%;
width: 300px;
height: 150px;
margin: -100px 0 0 -150px;
border: 1px solid black;
padding: 100px 10px 10px 10px;
background: #FFFFFF;
text-align: center;
font-weight: bold;
font-size: 17px;
color: #0864a4;
}
</style>
<!-- CSS finish -->
<!-- Loader finish -->
Теперь заменяем
на
Code
<body onload="preload_page()">
<div id="load">Пожалуйста, подождите,<br>идёт загрузка...<br><br><IMG src="http://wellon.3dn.ru/img/loading_pages.gif" ALIGN="center"><br><br><font size="1" color="9a9a9a">Если вы на нашем портале в первый раз, то загрузка продлиться немного дольше</font> </div>
<div id="total">
и в самом конце страницы, перед вставляем:
Code
</div>
<script type="text/javascript">
check_preload=1;
</script>
Вот скрин:
Вот демо: 
