Обучение/Помощь новичкам | PRELOADER
[_ЭтОжЕмАкС_]
Всем по привету,Не могу настроить прелоадер нормально на xenforo((( все вроди норм, но он либо не прогружает дальше,либо откривается на каждой странице,либо на 3 переход по форуму,зависает к чертям! ето я в extra.less поставил Это в PAGE_CONTAINER (перед <body data-template="{$template}">) А это в конце PAGE_CONTAINER перед (перед </body>) кто то может подскажет что не так,ибо чат гпт не справляется )))))) 
________
посл. ред. 24.04.2026 в 14:22; всего 1 раз(а); by Шершень
Шершень php
/* --- UKRAINE LIFE RP PRELOADER FIXED --- */ .ulife-preloader { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9)), url('/styles/img/preload.png') no-repeat center center !important; background-size: cover !important; z-index: 30000 !important; align-items: center; justify-content: center; flex-direction: column; overflow: hidden; } .ulife-logo { max-width: 400px; height: auto; margin-bottom: 20px; filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.2)); animation: ulife-glow 3s infinite ease-in-out; } .ulife-text-main { color: #ffffff !important; font-size: 28px !important; font-weight: 900 !important; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 15px; text-shadow: 2px 2px 10px rgba(0,0,0,0.8); } .ulife-progress-container { width: 280px; height: 4px; background: rgba(255, 255, 255, 0.1); border-radius: 5px; overflow: hidden; } .ulife-progress-bar { width: 0%; height: 100%; background: #007bff; box-shadow: 0 0 10px #007bff; animation: ulife-load 3.5s ease-in-out forwards; } .ulife-badge { margin-top: 35px; padding: 10px 25px; border: 1px solid #4ade80; color: #4ade80 !important; border-radius: 4px; font-size: 11px; text-transform: uppercase; background: rgba(74, 222, 128, 0.05); } @keyframes ulife-glow { 0%, 100% { opacity: 0.8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.02); } } @keyframes ulife-load { to { width: 100%; } } @media (max-width: 768px) { .ulife-logo { max-width: 250px !important; } .ulife-text-main { font-size: 20px !important; } } .ulife-preloader { php
<script> if (!sessionStorage.getItem('ulife_session_v2')) { document.write('<style>.ulife-preloader { display: flex !important; }</style>'); } </script> <div class="ulife-preloader"> <img src="/styles/img/logotype.png" class="ulife-logo" alt="U-LIFE RP"> <div class="ulife-text-main">ПЕРЕВІРКА БЕЗПЕКИ</div> <div class="ulife-progress-container"> <div class="ulife-progress-bar"></div> </div> <div class="ulife-badge">U-LIFE ANTIDDOS PROTECTION ACTIVE</div> </div> php
<script> document.addEventListener('DOMContentLoaded', function() { var preloader = document.querySelector('.ulife-preloader'); if (preloader && !sessionStorage.getItem('ulife_session_v2')) { // Чекаємо завантаження сторінки window.addEventListener('load', function() { setTimeout(function() { preloader.style.transition = 'opacity 0.8s ease'; preloader.style.opacity = '0'; sessionStorage.setItem('ulife_session_v2', 'true'); setTimeout(function() { preloader.style.display = 'none'; }, 800); }, 3500); // 3.5 секунди показу }); } }); </script>
________
посл. ред. 24.04.2026 в 14:22; всего 1 раз(а); by Шершень
Ответ от Gemini
Привет! Вижу твою проблему. Ситуация, когда прелоадер «зависает к чертям» или ведет себя неадекватно на XenForo — классическая история.
Основная ошибка кроется в третьем блоке (JS в конце PAGE_CONTAINER).
Почему оно ломается?
Состояние гонки (Race Condition): Ты вешаешь событие window.addEventListener('load', ...) внутри DOMContentLoaded. Проблема в том, что если страница загрузилась очень быстро (или из кэша), событие load может успеть сработать до того, как твой код начнет его отслеживать. В итоге функция скрытия не запускается никогда, и прелоадер висит вечно.
Использование document.write: Во втором блоке ты используешь document.write. В современном вебе, особенно на движках вроде XenForo (который активно использует AJAX/Pjax для переходов по страницам без полной перезагрузки), document.write часто ломает рендеринг и вызывает баги на последующих страницах.
Давай перепишем код так, чтобы он работал железобетонно.
Шаг 1: extra.less
Здесь всё было в целом нормально, я просто привел код в читаемый вид (оставь как есть или замени для аккуратности):
CSS
/* --- UKRAINE LIFE RP PRELOADER FIXED --- */
.ulife-preloader {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9)), url('/styles/img/preload.png') no-repeat center center !important;
background-size: cover !important;
z-index: 30000 !important;
align-items: center;
justify-content: center;
flex-direction: column;
overflow: hidden;
}
.ulife-logo {
max-width: 400px;
height: auto;
margin-bottom: 20px;
filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.2));
animation: ulife-glow 3s infinite ease-in-out;
}
.ulife-text-main {
color: #ffffff !important;
font-size: 28px !important;
font-weight: 900 !important;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 15px;
text-shadow: 2px 2px 10px rgba(0,0,0,0.8);
}
.ulife-progress-container {
width: 280px;
height: 4px;
background: rgba(255, 255, 255, 0.1);
border-radius: 5px;
overflow: hidden;
}
.ulife-progress-bar {
width: 0%;
height: 100%;
background: #007bff;
box-shadow: 0 0 10px #007bff;
animation: ulife-load 3.5s ease-in-out forwards;
}
.ulife-badge {
margin-top: 35px;
padding: 10px 25px;
border: 1px solid #4ade80;
color: #4ade80 !important;
border-radius: 4px;
font-size: 11px;
text-transform: uppercase;
background: rgba(74, 222, 128, 0.05);
}
@keyframes ulife-glow {
0%, 100% { opacity: 0.8; transform: scale(1); }
50% { opacity: 1; transform: scale(1.02); }
}
@keyframes ulife-load {
to { width: 100%; }
}
@media (max-width: 768px) {
.ulife-logo { max-width: 250px !important; }
.ulife-text-main { font-size: 20px !important; }
}
Шаг 2: В PAGE_CONTAINER (где был первый код)
Убираем document.write. Вместо этого мы сразу размещаем HTML, задаем ему id и прописываем микро-скрипт прямо под ним, чтобы он включил видимость до того, как страница отрисуется (чтобы не было белых экранов).
HTML
<div class="ulife-preloader" id="ulife-preloader">
<img src="/styles/img/logotype.png" class="ulife-logo" alt="U-LIFE RP">
<div class="ulife-text-main">ПЕРЕВІРКА БЕЗПЕКИ</div>
<div class="ulife-progress-container">
<div class="ulife-progress-bar"></div>
</div>
<div class="ulife-badge">U-LIFE ANTIDDOS PROTECTION ACTIVE</div>
</div>
<script>
// Моментально показываем прелоадер, если сессии еще нет
if (!sessionStorage.getItem('ulife_session_v2')) {
document.getElementById('ulife-preloader').style.setProperty('display', 'flex', 'important');
}
</script>
Шаг 3: В конце PAGE_CONTAINER (перед </body>)
Здесь мы исправляем логику загрузки. Теперь скрипт будет проверять: если страница уже загружена (например, из кэша), он сразу запустит таймер скрытия. Если нет — дождется события load.
HTML
<script>
(function() {
var preloader = document.getElementById('ulife-preloader');
// Если прелоадера почему-то нет или сессия уже записана - прерываем скрипт
if (!preloader || sessionStorage.getItem('ulife_session_v2')) {
return;
}
// Логика скрытия вынесена в отдельную функцию
function hidePreloader() {
setTimeout(function() {
preloader.style.transition = 'opacity 0.8s ease';
preloader.style.opacity = '0';
// Записываем сессию ТОЛЬКО когда анимация начала скрываться
sessionStorage.setItem('ulife_session_v2', 'true');
setTimeout(function() {
preloader.style.display = 'none';
}, 800); // 0.8s на завершение transition
}, 3500); // 3.5 секунды показа
}
// Главный фикс зависания: проверяем статус загрузки документа
if (document.readyState === 'complete') {
hidePreloader(); // Если страница уже загружена, запускаем сразу
} else {
window.addEventListener('load', hidePreloader); // Если еще грузится, ждем 'load'
}
})();
</script>
Итог: Теперь скрипт не зависит от того, насколько быстро загрузилась страница (избавились от зависаний), он не ломает DOM дерева (избавились от document.write), и корректно запоминает сессию пользователя.
Привет! Вижу твою проблему. Ситуация, когда прелоадер «зависает к чертям» или ведет себя неадекватно на XenForo — классическая история.
Основная ошибка кроется в третьем блоке (JS в конце PAGE_CONTAINER).
Почему оно ломается?
Состояние гонки (Race Condition): Ты вешаешь событие window.addEventListener('load', ...) внутри DOMContentLoaded. Проблема в том, что если страница загрузилась очень быстро (или из кэша), событие load может успеть сработать до того, как твой код начнет его отслеживать. В итоге функция скрытия не запускается никогда, и прелоадер висит вечно.
Использование document.write: Во втором блоке ты используешь document.write. В современном вебе, особенно на движках вроде XenForo (который активно использует AJAX/Pjax для переходов по страницам без полной перезагрузки), document.write часто ломает рендеринг и вызывает баги на последующих страницах.
Давай перепишем код так, чтобы он работал железобетонно.
Шаг 1: extra.less
Здесь всё было в целом нормально, я просто привел код в читаемый вид (оставь как есть или замени для аккуратности):
CSS
/* --- UKRAINE LIFE RP PRELOADER FIXED --- */
.ulife-preloader {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9)), url('/styles/img/preload.png') no-repeat center center !important;
background-size: cover !important;
z-index: 30000 !important;
align-items: center;
justify-content: center;
flex-direction: column;
overflow: hidden;
}
.ulife-logo {
max-width: 400px;
height: auto;
margin-bottom: 20px;
filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.2));
animation: ulife-glow 3s infinite ease-in-out;
}
.ulife-text-main {
color: #ffffff !important;
font-size: 28px !important;
font-weight: 900 !important;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 15px;
text-shadow: 2px 2px 10px rgba(0,0,0,0.8);
}
.ulife-progress-container {
width: 280px;
height: 4px;
background: rgba(255, 255, 255, 0.1);
border-radius: 5px;
overflow: hidden;
}
.ulife-progress-bar {
width: 0%;
height: 100%;
background: #007bff;
box-shadow: 0 0 10px #007bff;
animation: ulife-load 3.5s ease-in-out forwards;
}
.ulife-badge {
margin-top: 35px;
padding: 10px 25px;
border: 1px solid #4ade80;
color: #4ade80 !important;
border-radius: 4px;
font-size: 11px;
text-transform: uppercase;
background: rgba(74, 222, 128, 0.05);
}
@keyframes ulife-glow {
0%, 100% { opacity: 0.8; transform: scale(1); }
50% { opacity: 1; transform: scale(1.02); }
}
@keyframes ulife-load {
to { width: 100%; }
}
@media (max-width: 768px) {
.ulife-logo { max-width: 250px !important; }
.ulife-text-main { font-size: 20px !important; }
}
Шаг 2: В PAGE_CONTAINER (где был первый код)
Убираем document.write. Вместо этого мы сразу размещаем HTML, задаем ему id и прописываем микро-скрипт прямо под ним, чтобы он включил видимость до того, как страница отрисуется (чтобы не было белых экранов).
HTML
<div class="ulife-preloader" id="ulife-preloader">
<img src="/styles/img/logotype.png" class="ulife-logo" alt="U-LIFE RP">
<div class="ulife-text-main">ПЕРЕВІРКА БЕЗПЕКИ</div>
<div class="ulife-progress-container">
<div class="ulife-progress-bar"></div>
</div>
<div class="ulife-badge">U-LIFE ANTIDDOS PROTECTION ACTIVE</div>
</div>
<script>
// Моментально показываем прелоадер, если сессии еще нет
if (!sessionStorage.getItem('ulife_session_v2')) {
document.getElementById('ulife-preloader').style.setProperty('display', 'flex', 'important');
}
</script>
Шаг 3: В конце PAGE_CONTAINER (перед </body>)
Здесь мы исправляем логику загрузки. Теперь скрипт будет проверять: если страница уже загружена (например, из кэша), он сразу запустит таймер скрытия. Если нет — дождется события load.
HTML
<script>
(function() {
var preloader = document.getElementById('ulife-preloader');
// Если прелоадера почему-то нет или сессия уже записана - прерываем скрипт
if (!preloader || sessionStorage.getItem('ulife_session_v2')) {
return;
}
// Логика скрытия вынесена в отдельную функцию
function hidePreloader() {
setTimeout(function() {
preloader.style.transition = 'opacity 0.8s ease';
preloader.style.opacity = '0';
// Записываем сессию ТОЛЬКО когда анимация начала скрываться
sessionStorage.setItem('ulife_session_v2', 'true');
setTimeout(function() {
preloader.style.display = 'none';
}, 800); // 0.8s на завершение transition
}, 3500); // 3.5 секунды показа
}
// Главный фикс зависания: проверяем статус загрузки документа
if (document.readyState === 'complete') {
hidePreloader(); // Если страница уже загружена, запускаем сразу
} else {
window.addEventListener('load', hidePreloader); // Если еще грузится, ждем 'load'
}
})();
</script>
Итог: Теперь скрипт не зависит от того, насколько быстро загрузилась страница (избавились от зависаний), он не ломает DOM дерева (избавились от document.write), и корректно запоминает сессию пользователя.
boglol (Вчера в 14:50)Ответ от Gemini
Привет! Вижу твою проблему. Ситуация, когда прелоадер «зависает к чертям» или ведет себя неадекватно на XenForo — классическая история.
Основная ошибка кроется в третьем блоке (JS в конце PAGE_CONTAINER).
Почему оно ломается?
Состояние гонки (Race Condition): Ты вешаешь событие window.addEventListener('load', ...) внутри DOMContentLoaded. Проблема в том, что если страница загрузилась очень быстро (или из кэша), событие load может успеть сработать до того, как твой код начнет его отслеживать. В итоге функция скрытия не запускается никогда, и прелоадер висит вечно.
Использование document.write: Во втором блоке ты используешь document.write. В современном вебе, особенно на движках вроде XenForo (который активно использует AJAX/Pjax для переходов по страницам без полной перезагрузки), document.write часто ломает рендеринг и вызывает баги на последующих страницах.
Давай перепишем код так, чтобы он работал железобетонно.
Шаг 1: extra.less
Здесь всё было в целом нормально, я просто привел код в читаемый вид (оставь как есть или замени для аккуратности):
CSS
/* --- UKRAINE LIFE RP PRELOADER FIXED --- */
.ulife-preloader {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9)), url('/styles/img/preload.png') no-repeat center center !important;
background-size: cover !important;
z-index: 30000 !important;
align-items: center;
justify-content: center;
flex-direction: column;
overflow: hidden;
}
.ulife-logo {
max-width: 400px;
height: auto;
margin-bottom: 20px;
filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.2));
animation: ulife-glow 3s infinite ease-in-out;
}
.ulife-text-main {
color: #ffffff !important;
font-size: 28px !important;
font-weight: 900 !important;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 15px;
text-shadow: 2px 2px 10px rgba(0,0,0,0.8);
}
.ulife-progress-container {
width: 280px;
height: 4px;
background: rgba(255, 255, 255, 0.1);
border-radius: 5px;
overflow: hidden;
}
.ulife-progress-bar {
width: 0%;
height: 100%;
background: #007bff;
box-shadow: 0 0 10px #007bff;
animation: ulife-load 3.5s ease-in-out forwards;
}
.ulife-badge {
margin-top: 35px;
padding: 10px 25px;
border: 1px solid #4ade80;
color: #4ade80 !important;
border-radius: 4px;
font-size: 11px;
text-transform: uppercase;
background: rgba(74, 222, 128, 0.05);
}
@keyframes ulife-glow {
0%, 100% { opacity: 0.8; transform: scale(1); }
50% { opacity: 1; transform: scale(1.02); }
}
@keyframes ulife-load {
to { width: 100%; }
}
@media (max-width: 768px) {
.ulife-logo { max-width: 250px !important; }
.ulife-text-main { font-size: 20px !important; }
}
Шаг 2: В PAGE_CONTAINER (где был первый код)
Убираем document.write. Вместо этого мы сразу размещаем HTML, задаем ему id и прописываем микро-скрипт прямо под ним, чтобы он включил видимость до того, как страница отрисуется (чтобы не было белых экранов).
HTML
<div class="ulife-preloader" id="ulife-preloader">
<img src="/styles/img/logotype.png" class="ulife-logo" alt="U-LIFE RP">
<div class="ulife-text-main">ПЕРЕВІРКА БЕЗПЕКИ</div>
<div class="ulife-progress-container">
<div class="ulife-progress-bar"></div>
</div>
<div class="ulife-badge">U-LIFE ANTIDDOS PROTECTION ACTIVE</div>
</div>
<script>
// Моментально показываем прелоадер, если сессии еще нет
if (!sessionStorage.getItem('ulife_session_v2')) {
document.getElementById('ulife-preloader').style.setProperty('display', 'flex', 'important');
}
</script>
Шаг 3: В конце PAGE_CONTAINER (перед </body>)
Здесь мы исправляем логику загрузки. Теперь скрипт будет проверять: если страница уже загружена (например, из кэша), он сразу запустит таймер скрытия. Если нет — дождется события load.
HTML
<script>
(function() {
var preloader = document.getElementById('ulife-preloader');
// Если прелоадера почему-то нет или сессия уже записана - прерываем скрипт
if (!preloader || sessionStorage.getItem('ulife_session_v2')) {
return;
}
// Логика скрытия вынесена в отдельную функцию
function hidePreloader() {
setTimeout(function() {
preloader.style.transition = 'opacity 0.8s ease';
preloader.style.opacity = '0';
// Записываем сессию ТОЛЬКО когда анимация начала скрываться
sessionStorage.setItem('ulife_session_v2', 'true');
setTimeout(function() {
preloader.style.display = 'none';
}, 800); // 0.8s на завершение transition
}, 3500); // 3.5 секунды показа
}
// Главный фикс зависания: проверяем статус загрузки документа
if (document.readyState === 'complete') {
hidePreloader(); // Если страница уже загружена, запускаем сразу
} else {
window.addEventListener('load', hidePreloader); // Если еще грузится, ждем 'load'
}
})();
</script>
Итог: Теперь скрипт не зависит от того, насколько быстро загрузилась страница (избавились от зависаний), он не ломает DOM дерева (избавились от document.write), и корректно запоминает сессию пользователя.