Подниму старую темку из небытия...
Хочется реализовать способ при котором, при переходе на новую страницу форума, старая будет оставаться на экране до момента, когда новая полностью сформируется. Затем произойдет "мгновенная" смена.
Вопрос в том, как эту "бесшовную" загрузку страниц реализовать? Проблема в том, что при обычной загрузке страница при формировании выдает натуральное уродство в виде рваной загрузки по кускам, что также бьет по глазам.
На основе принципа "прелоадера" получается реализовать мгновенное отображение новой страницы, но перед этим происходит удаление отображения старой страницы. А в качестве перехода вставляю ФОН форума. Все равно, это мигание при переходе очень раздражает!
При попытке вставить эту фичу в 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.: Грабить кОрОваны не надо... 