Создаем прелоадер опубликовал alex@it категория , ,  
просмотры 2 051

Создаем прелоадер

Прелоадер – важный элемент сайтов, особенно тяжелых, с большим количеством фотографий и посадочных страниц. Использование стильного прелоадера позволит избежать раздражения посетителей сайта, вызванного длительной загрузкой.

Для подключения прелоадера сначала нужно подключить библиотеку jQuery, если она у вас еще не подключена.
Пропишите перед закрывающим тегом </head> или после закрывающего тега </body> следующий код:

После него, непосредственно сам код скрипта:

Если на вашем wordpress-сайте уже установлены плагины использующие библиотеку jQuery и возникает конфликт скриптов – замените в коде переменную $ на jQuery:

После тега <body> прописываем блок, который будет демонстрироваться до полной загрузки сайта. В нем можно разместить все что угодно. В нашем примере это текст Подождите идет загрузка и анимация (задается в с помощью css, об этом ниже).

Блок с классом .spinner — это анимация загрузки. preloader.gif – это анимированный файл.
Вы можете использовать любой имеющийся, соответствующих размеров (в нашем примере 40х40px) разместив его в корне сайта.


Также вы можете воспользоваться сайтом для генерации анимированной загрузки http://preloaders.net/ На этом сайте можно выбрать понравившуюся анимацию из большого числа вариантов и настроить ее под свои нужды.

Теги:

0 комментарий

Добавить комментарий

vk_like_site