 |
|
|
20.12.2010, 18:53
|
#3 (ссылка) |
|
Новичок
|
вот тебе два варианта, один мой, один знакомого, ничего сложного нет.
Теория Итак, у нас в HTML есть два слоя - в то время когда один открыт (id="load"), другой должен быть скрыт (id="total"). Потом, когда контент в скрытом слое (id="total") загрузится, то должна произвестись замена - невидимый (id="load") становится видимым, а видимый (id="total") - невидимым. Замена производится на JavaScript. Итак… Поехали: Это мы вставляем между <head> </head> Код HTML:
<!-- 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 --> Код HTML:
<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"> Код HTML:
</div> <script type="text/javascript"> check_preload=1; </script>  Вот демо ---------- Добавлено в 14:53 ---------- Предыдущее сообщение было написано в 14:46 ---------- Вот второй, сразу результат :  Принцип скрипта заключается в том что при открытие страницы открывается окошко с информацией о том что идет "построение старицы". Окно можно закрыть как вручную так и просто дождавшись полной загрузки страницы, после чего оно автоматически закроется. Установка проста, между тегами <body></body> поставить эти скрипты : Код HTML:
<script type="text/javascript" src="/blockUI/scripts/u.js"></script> <script type="text/javascript" src="/blockUI/jquery.blockUI.js"></script> <script type="text/javascript"> $(document).ready(function(){ $.blockUI({message:'Немного подождите,<br>идет построение страницы...<br><img src="/blockUI/wait.gif" border="0" width="48" height="48" alt=""><br><a href="javascript://" onclick="$.unblockUI();return false;" style="font-size:7pt;">Разблокировать<\/a>',css:{background:'#fff',border:'5px solid #e0e0e0',padding:'3px'},overlayCSS:{background:'#000',opacity:.9}}); $(window).load(function(){ _uWnd.close('codeAlert'); $.unblockUI(); }); }); </script> |
|
| Здесь присутствуют: 1 (пользователей: 0 , гостей: 1) | |
|
|
как сделать "загрузку" страницы
