Красивая предзагрузка на jQuery

Автор Yarik, 22 апреля 2017, 16:37:09

« назад - далее »

0 Пользователи и 1 гость просматривают эту тему.

Печать
Вниз Страницы1
Действия пользователя

Yarik

22 апреля 2017, 16:37:09 Последнее редактирование: 22 апреля 2017, 17:11:33 от S.T.A.L.K.E.R. Причина: Небольшая правка CSS для адаптивности разположения блока
Файл index.template.php вашей темы.
Найти отрывающий тег <body> и добавить сразу после него
Код Выделить
<!-- Блок, который будет отображаться над страницей -->
<div id="before-load">
  <!-- Элемент, задний фон которого будет использоваться для отображения gif изображения -->
  <i></i>Найти echo ' </body> и вставить перед
Код Выделить
?>
<style>
#before-load {
  position: fixed; /*фиксированное положение блока*/
  left: 0; /*положение элемента слева*/
  top: 0; /*положение элемента сверху*/
  right: 0; /*положение элемента справа*/
  bottom: 0; /*положение элемента снизу*/
  z-index: 1001; /*располагаем его над всеми элементами на странице*/
}
#before-load i {
    width: 235px; /*ширина gif-изображения*/
    height: 205px; /*высота gif-изображения*/
    position: absolute;
    left: 40%;
    top: 40%;
    background: url('путь до картинки относительно корня форума/Loader.gif') no-repeat 50% 50%; /*расположение (url) изображения gif и др. параметры*/
    margin: -35px 0 0 -35px;
}
</style>
 <script language="javascript" type="text/javascript">
$(window).load(function() {
  $('#before-load').find('i').fadeOut().end().delay(400).fadeOut('slow');
});
 </script>
<?phpПоложить куда нужно гифку с вложения.В итоге пока будет идти загрузка страницы посередине экрана будет крутиться гифка с вложения

Yarik

#2
22 апреля 2017, 19:54:05
Прогавил,хотя у меня и без него работает,скорее всего подключается откуда-то
Код Выделить
?><style>#before-load {
  position: fixed; /*фиксированное положение блока*/
  left: 0; /*положение элемента слева*/
  top: 0; /*положение элемента сверху*/
  right: 0; /*положение элемента справа*/
  bottom: 0; /*положение элемента снизу*/
  z-index: 1001; /*располагаем его над всеми элементами на странице*/
}
#before-load i {
    width: 235px; /*ширина gif-изображения*/
    height: 205px; /*высота gif-изображения*/
    position: absolute;
    left: 40%;
    top: 40%;
    background: url('Themes/Loader.gif') no-repeat 50% 50%; /*расположение (url) изображения gif и др. параметры*/
    margin: -35px 0 0 -35px;
}</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(window).load(function() {
  $('#before-load').find('i').fadeOut().end().delay(400).fadeOut('slow');
});

</script>
<?phpГлавное чтобы небыло конфликтов с версией биоблиотеки.

kak2z

#3
23 апреля 2017, 02:43:58
div не закрытый..  наверно перед /body надо и div закрыть..
Если нужно что то исправить, обновить, переставить, настроить, сделать форум заново - пишите в ЛС)

digger®

#4
02 мая 2017, 18:46:44
Какое-то бесполезное решение, имхо. Я еще понимаю, если страницы тяжелые грузятся секунд по 10-20, тогда чтобы не скучать можно и на гифку крутящуюся смотреть. Но когда все быстро, то эта картинка на каждой странице вылезающая нервирует. И она висит на событии onload, то есть текст уже есть на странице и его можно читать, но шестерня на экране будет крутится пока страница все ресурсы не загрузит.
Просто, заглянул на ваш форум и увидел это вживую.

Yarik

#5
02 мая 2017, 20:34:18
Цитата: digger® от 02 мая 2017, 18:46:44Какое-то бесполезное решение, имхо. Я еще понимаю, если страницы тяжелые грузятся секунд по 10-20, тогда чтобы не скучать можно и на гифку крутящуюся смотреть. Но когда все быстро, то эта картинка на каждой странице вылезающая нервирует. И она висит на событии onload, то есть текст уже есть на странице и его можно читать, но шестерня на экране будет крутится пока страница все ресурсы не загрузит.
Просто, заглянул на ваш форум и увидел это вживую.
Честно говоря то да,давно хотел убрать.
Всё начиналось вот с этого
ЦитироватьУдалите код JavaScript и CSS, блокирующий отображение верхней части страницы
Количество блокирующих скриптов на странице: 8. Количество блокирующих ресурсов CSS на странице: 12. Они замедляют отображение контента.
Все содержание верхней части страницы отображается только после загрузки указанных далее ресурсов. Попробуйте отложить загрузку этих ресурсов, загружать их асинхронно или встроить их самые важные компоненты непосредственно в код HTML.
Крутил скрипты,в итоге накрутил такого и забыл убрать.Потом привык,уже убрал.Это так - из разряда баловства.
Печать
Вверх Страницы1
Действия пользователя