Бормотухи.НЕТ

Вернуться   Бормотухи.НЕТ > Web-мастеру > vBulletin 4.x > Инструкции и модификации для vBulletin 4.x
Расширенный поиск

Инструкции и модификации для vBulletin 4.x Различные инструкции и моды для vBulletin 4.x

Ответ
 
Опции темы Поиск в этой теме
Старый 24.09.2014, 14:26 Вверх   #1
Грамотный форумчанин
 
Аватар для Dikiy_J
Dikiy_J вне форума
Доп. информация
По умолчанию Прелоадер сайта

В footer

Код:
<div id="page-preloader">
<span class="circle"></span>
<span class="circle1"></span>

</div>
<script type="text/javascript">
$(window).on('load', function () {
var $preloader = $('#page-preloader'),
$spinner = $preloader.find('.circle');
$spinner.fadeOut();
$preloader.delay(350).fadeOut('slow');
});
</script>


Css

Код:
/*  Прелоадер сайта   by ДикиЙ конец ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.circle {
    background-color: rgba(0,0,0,0);
border: 5px solid rgba(0,183,229,0.9);
opacity: .9;
border-right: 5px solid rgba(0,0,0,0);
border-left: 5px solid rgba(0,0,0,0);
border-radius: 50px;
box-shadow: 0 0 35px #2187e7;
width: 50px;
height: 50px;
margin: 0 auto;
-moz-animation: spinPulse 1s infinite ease-in-out;
-webkit-animation: spinPulse 1s infinite linear;
position: fixed;
left: 0;
top: 50%;
right: 0;
bottom: 0;
z-index: 100500;
}
.circle1 {
    background-color: rgba(0,0,0,0);
border: 5px solid rgba(0,183,229,0.9);
opacity: .9;
border-left: 5px solid rgba(0,0,0,0);
border-right: 5px solid rgba(0,0,0,0);
border-radius: 50px;
box-shadow: 0 0 15px #2187e7;
width: 30px;
height: 30px;
margin: 0 auto;

top: -50px;
-moz-animation: spinoffPulse 1s infinite linear;
-webkit-animation: spinoffPulse 1s infinite linear;
position: fixed;
left: 0;
top: 51.5%;
right: 0;
bottom: 0;
z-index: 100500;
}
@-moz-keyframes spinPulse {
    0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7;}
    50% { -moz-transform:rotate(145deg); opacity:1; }
    100% { -moz-transform:rotate(-320deg); opacity:0; }
}
@-moz-keyframes spinoffPulse {
    0% { -moz-transform:rotate(0deg); }
    100% { -moz-transform:rotate(360deg);  }
}
@-webkit-keyframes spinPulse {
    0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7; }
    50% { -webkit-transform:rotate(145deg); opacity:1;}
    100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes spinoffPulse {
    0% { -webkit-transform:rotate(0deg); }
    100% { -webkit-transform:rotate(360deg); }
}
#page-preloader {
   position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(194, 194, 194, 0.5);
z-index: 100500;
}

#page-preloader .spinner {
    width: 32px;
    height: 32px;
    position: absolute;
    left: 50%;
    top: 50%;
    background: url('/images/spinner.gif') no-repeat 50% 50%;
    margin: -16px 0 0 -16px;
}
/*  Прелоадер сайта   by ДикиЙ конец ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/























От спасибо не откажусь
  Ответить с цитированием
Cказали cпасибо:
Старый 24.09.2014, 15:32 Вверх   #2
Просто блондинка
 
Аватар для Luvilla
Luvilla вне форума
Доп. информация
По умолчанию

Цитата Сообщение от Dikiy_J Посмотреть сообщение
От спасибо не откажусь
да легко)

Можно вопрос?
как на это реагируют посетители?
потому что вот, допустим, я... зашла глянуть - при заходе на первую страницу ещё как-то... на вторую - уже достало
на третью - мамамиа... закрыла вкладку. Лично я на таком форуме не сидела бы...
  Ответить с цитированием
Cказали cпасибо:
Старый 29.09.2014, 16:51 Вверх   #3
Грамотный форумчанин
 
Аватар для Dikiy_J
Dikiy_J вне форума
Доп. информация
По умолчанию

Цитата Сообщение от Luvilla Посмотреть сообщение
да легко)

Можно вопрос?
как на это реагируют посетители?
потому что вот, допустим, я... зашла глянуть - при заходе на первую страницу ещё как-то... на вторую - уже достало
на третью - мамамиа... закрыла вкладку. Лично я на таком форуме не сидела бы...
Это пример , можно поставить например на загрузку файлов )
  Ответить с цитированием
Старый 11.11.2014, 12:26 Вверх   #4
Местный житель
 
Аватар для raynar
raynar вне форума
Доп. информация
По умолчанию

можно както сделать этот прелоадер чтобы показвался 1 раз при первом посещение форума? есть одна темка просто уже готовая на джава скрипте)
  Ответить с цитированием
Cказали cпасибо:
Старый 25.12.2021, 11:34 Вверх   #5
Местный житель
 
Аватар для Razielik
Razielik вне форума
Доп. информация
По умолчанию

Подниму старую темку из небытия...

Хочется реализовать способ при котором, при переходе на новую страницу форума, старая будет оставаться на экране до момента, когда новая полностью сформируется. Затем произойдет "мгновенная" смена.

Вопрос в том, как эту "бесшовную" загрузку страниц реализовать? Проблема в том, что при обычной загрузке страница при формировании выдает натуральное уродство в виде рваной загрузки по кускам, что также бьет по глазам.

На основе принципа "прелоадера" получается реализовать мгновенное отображение новой страницы, но перед этим происходит удаление отображения старой страницы. А в качестве перехода вставляю ФОН форума. Все равно, это мигание при переходе очень раздражает!

При попытке вставить эту фичу в showthread.php страница видно что грузится, но не отображается.

Выявил закономерность!

Когда форум формирует ссылку типа:

https://<мой_домен>/showthread.php?t=<id_темы>&p=<id_поста>&viewfull=1#post<id_поста>

страница не отображается, остается бесконечно висеть фон;

Если добиться того, что в ссылке не отображать кусок &p=<id_поста>, то бишь грузить ссылку в виде:

https://<мой_домен>/showthread.php?t=<id_темы>&viewfull=1#post<id_поста> или вообще https://<мой_домен>/showthread.php?t=<id_темы>#post<id_поста>

то страница прогружается!!!

Сам HTML код не мой, я лишь его отредактировал и уменьшил время анимаций до минимума, чтобы их тупо не было:

быдлокод альфа-версия на скорую руку:
echo <<<HTML
<!doctype html>
<html lang="ru">

<head>
<style>
body {
margin: 0;
}

.preloader {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: #ffffff;
z-index: 10000;
}

.preloader__row {
position:absolute;
top:0px;
right:0px;
width:100%;
height:100%;
background-image:url(/images/<картинка>.png);
background-repeat:repeat;
background-position:0 0;
text-align: center;
animation: preloader-rotate 0s infinite linear;
}

.preloader__item {
position: absolute;
width: 400px;
height: 400px;
}

.loaded_hiding .preloader {
transition: 0s opacity;
opacity: 0;
}

.loaded .preloader {
display: none;
}
</style>
</head>

<body>

<div class="preloader">
<div class="preloader__row">
<div class="preloader__item"></div>
</div>
</div>

<script>
window.onload = function () {
document.body.classList.add('loaded_hiding');
window.setTimeout(function () {
document.body.classList.add('loaded');
document.body.classList.remove('loaded_hiding');
}, 500);
}
</script>
</body>

</html>
HTML;

Но, даже если каким-то образом мне удастся привести ссылки к укороченному виду, что я пока не догнал как сделать на NGINX+АПАЧ(на бэкенде), ибо не шибко специялисты мы. Даже после этого, режим прелоадера будет висеть, пока не сформируется страница целиком. А это может занять дико много времени, т.к. бывает так, что на странице очень много мультимедии (особенно тормозят загрузку страниц куча видео с ютуба).

А теперь главный вопрос:

Существует ли хак (если уж на то пошло), либо код, позволяющий реализовать загрузку так, что старая страница будет висеть до победного, пока не сформируется следующая. А потом произойдет резкая смена. Также, как бонус, неплохо было бы, чтоб где-нибудь в уголке можно было бы приделать простенькую ненавязчивую анимацию, сигнализирующую о том, что происходит загрузка.

P.S.: Грабить кОрОваны не надо...

Последний раз редактировалось Razielik; 25.12.2021 в 12:31..
  Ответить с цитированием
Cказали cпасибо:
Старый 10.12.2023, 04:25 Вверх   #6
Местный житель
 
Аватар для Razielik
Razielik вне форума
Доп. информация
По умолчанию

Не сочтите за некропостинг, но нет ли у кого инфы по какому-нибудь хаку на 4-ю булку на тему "LazyLoad"? На оф-форумах инфа закрытая.

Уже в корень начало раздражать, когда обилие видео или картинок (даже под спойлером VSQ) начинает дико грузить браузер, пока не скачает и не обработает всю страницу.

Привычный прелоадер уже немного не вариант, хочется чтобы мультимедиа обрабатывалась при обращении к ней.
  Ответить с цитированием
Старый 12.02.2024, 00:52 Вверх   #7
Местный житель
 
Аватар для Razielik
Razielik вне форума
Доп. информация
По умолчанию

Отвечу для всех путников интернета...

Ларчик просто открывается. Все современные браузеры понимают так называемую "ленивую загрузку".

Лезем в шаблон bbcode_video и после
Код:
src="https://www.youtube.com/embed/{vb:raw code}"
добавляем строчку
Код:
loading="lazy"
Сохраняем и перезагружаем шаблон. После чего "скелет" страницы форума грузится почти моментально, а видео продолжают подгружаться в фоне, не вешая браузер.

К небольшому огорчению, некоторые плагины могут грузиться и срабатывать не сразу, например плагин спойлера. Спойлер начинает открываться только после полного прогруза всей мультимедиа.

По идее, по аналогии, думаю, это всё можно применить и к другой мультимедиа, например к картинкам. Буду пробовать...

P.S.: На оф. форуме VB есть какой-то общий плагин js, который можно повесить на Хэдер всего форума, но, к сожалению, не имея лицензии и регистрации, инфа закрыта.

Последний раз редактировалось Razielik; 12.02.2024 в 00:56..
  Ответить с цитированием
Cказали cпасибо:
Старый 12.02.2024, 03:04 Вверх   #8
Местный житель
 
Аватар для Razielik
Razielik вне форума
Доп. информация
По умолчанию

Как говорится, "дуракам везет". Учитывая то, что я понимаю в основном в HTML, нашел выход из положения с картинками весьма быстро (благодаря логической конструкции того, что искал).

Итак:

В папке includes ищем class_bbcode.php (делаем резервную копию, чтобы не было потом мучительно больно).

В нем ищем строчку
Код:
return  ($fullsize ? '<div class="size_fullsize">' : '')  . '<img src="' .  $link . '"  border="0" alt="" />'
и добавляем в него то же, что и в случае с видео
Код:
return  ($fullsize ? '<div class="size_fullsize">' : '')  . '<img src="' .  $link . '" loading="lazy" border="0" alt="" />'
Сохраняем и обалдеваем от скорости прогруза страниц с картинками.

К сожалению, после такой манипуляции у меня отвалился плагин перелистывания слайдов MARCO1 Image Re-sizer With HIGHSLIDE!. Надо разбираться с ним теперь.
  Ответить с цитированием
Cказали cпасибо:
Ответ

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход


Текущее время: 14:48. Часовой пояс GMT +3.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2024, vBulletin Solutions, Inc. Перевод: zCarot
 

Время генерации страницы 0.15436 секунды с 13 запросами