Простой и легкий Preloader на Jquery

Обсуждение и помощь по вопросам взаимодействия с ВКонтакте API в IFrame-приложениях (JavaScript, PHP и т.д)
Ответить
bugsmafia
Сообщения: 2
Зарегистрирован: 15 мар 2012, 14:59

Простой и легкий Preloader на Jquery

Сообщение bugsmafia »

Очень простой предзагрузчик для приложения (очень простой)

И так, начнем с того, что страничка грузится сверху вниз и выполнение <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>
CSS на наш preloader div Блок

Код: Выделить всё

#preloader {background: black;width: 100%;height: 100%;font-size: 45px;display: block;visibility: visible;position: fixed;z-index: 10000000;} 
После того как все скрипты будут загружены, то в самом низу сайта сработает JS $('#preloader').remove(); который и удалить перекрывающий preloader блок.

Очень просто и экономит секунды для посетителя приложения. Срабатывает мгновенно и если у человека все кешировано в браузере, то удаление Preloader Блока происходит практически мгновенно при открытии приложения.
Аватара пользователя
[DIWMS]
Сообщения: 98
Зарегистрирован: 10 мар 2011, 12:44

Re: Простой и легкий Preloader на Jquery

Сообщение [DIWMS] »

Как говорят за бугром - awesome. Спасибо!
Ответить