Как сделать preloader
"preloader css", "preloader html", "preloader js". В preloader - е будут участвовать 3 среды, поэтому они упомянуты все.
Как сделать preloader на сайте?
Как работает preloader.
Наверняка вы видели на сайтах "preloader" - это когда пока загружается страница... выводится какое-то изображение, сообщение, анимированная картинка и т.д.
Из чего состоит preloader.
Стандартный набор "preloader":
Css - стили, для оформления "preloader-а".
Html - каркас - скорее всего он там будет присутствовать, если это не простая картинка.
Javascript - для скрытия "preloader - а"
Вместо Javascript может использоваться jquery
Реализация preloader.
Реализация и результат "preloader-а" может быть разным...
Сделал отдельную страницу для preloader.php
Чтобы страница загружалась долго и вы могли увидеть "preloader" по времени дольше... добавил туда цикл {for} в 200 000 циклов...
Скачать preloader.
Что в архиве?
В архиве два почти одинаковых примера:
Какая разница между этими двумя preloader - ами?
Разница у них такая:
Preloader_annotation.php
preloader_annotation.php - этот пример с пояснениями(комментариями), что и зачем...
Preloader.php
Весь код в одну строку.
Скачать preloader.
Скачать можно здесь.Установить preloader.
Открываем либо страницу на сайте preloader.php, либо из архива "preloader.php".
Копируем все до <!DOCTYPE html>.
Вставляем скопированное в начало вашего сайта.
После отработки "preloader" весь код будет удален.
В дереве(код страницы html) - естественно он(код preloader-а) останется.
А в исследовать элемент код preloader-а вы не увидите!