И так, начнем с того, что страничка грузится сверху вниз и выполнение <script> происходит так же.
DIV блок будет закрывать приложение пока не будут подгружены скрипты.
После того как скрипты будут загружены DIV блок будет удален и доступ к приложению открывается.
Все JS (примера радио js.js, js2 ... ) и CSS (примера ради style.css ... ) выносим в <head> кроме подключение Google jquery.
Создадим основу.
HTML Основа
Код: Выделить всё
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>Мое приложение</title><link href="style.css" rel="stylesheet" media="all" /><script type="text/javascript" src="js.js"></script><script type="text/javascript" src="js2.js"></script></head><body>Ура, все загрузилось!<div id="preloader">Я загружаюсь... подождите.</div><script type="text/javascript" src="https://www.google.com/jsapi"></script><script type="text/javascript">google.load("jquery", "1.4.2");</script><script type="text/javascript">$('#preloader').remove();</script></body></html>
Код: Выделить всё
#preloader {background: black;width: 100%;height: 100%;font-size: 45px;display: block;visibility: visible;position: fixed;z-index: 10000000;}
Очень просто и экономит секунды для посетителя приложения. Срабатывает мгновенно и если у человека все кешировано в браузере, то удаление Preloader Блока происходит практически мгновенно при открытии приложения.