#html #css
#HTML #css
Вопрос:
Я создал экран загрузки для своего веб-сайта, который я хочу немедленно отобразить, как только страница будет открыта, до загрузки любого CSS. Я подумал, что лучшим способом сделать это было бы поместить его перед <head> тегом, чтобы браузер начал загружать CSS только после того, как он отобразил экран laoding.
Однако происходит то, что браузер помещает все, что находится в head, в тело, предотвращая загрузку моего css.
Вот мой код:
<!DOCTYPE html>
<html>
<div id="LoadingScreen"><style>#LoadingScreen{ CSS ... }</style>
Loading
<script>var LSDate=Date.now();addEventListener("pageshow",()=>{var e=()=>{document.getElementById("LoadingScreen").parentNode.removeChild(document.getElementById("LoadingScreen"))};Date.now()-LSDate>=500?e():setTimeout(e,Date.now() 500-Date.now())});</script></div>
<head>
<title>Title</title>
CSS includes here...
Однако браузер анализирует это в это:
<html>
<head>
</head>
<body>
<title>Title</title>
CSS includes here, but not actually being included as they're not in the header
Кажется, что это полностью отключает как мою голову, так и мой экран загрузки.
Есть ли какой-либо способ обойти это? Возможно, я мог бы добавить ЗАГОЛОВОК в документ с помощью Javascript позже?
Комментарии:
1. Ваш HTML недействителен. Вы не можете иметь
<div>s перед<head>2. Это то, о чем я спрашиваю, возможно ли обойти это? Возможно, добавив <head> в документ с помощью Javascript?
3. TBH Я даже не понимаю, что вы пытаетесь сделать. У вас есть какой-то экран загрузки, к которому вы не хотите, чтобы ваш CSS применялся? Это похоже на проблему CSS в том смысле, что ваш стиль должен быть переписан, чтобы не применяться к любым элементам на вашем экране загрузки. Однако, как сейчас, в вашем вопросе кажется, что в нем отсутствуют детали.
4. Да, но как вы думаете, что можно получить от рендеринга этого тега до того, как браузер загрузит какой-либо CSS? Я немного понимаю, что вы пытаетесь сделать, но не почему. Это было бы полезно — я подозреваю, что у вас неверные предположения о том, как это будет себя вести.
5.
this means placing it before the HEAD tag— HTML так не работает. Это не похоже на какой-то скрипт, который запускается сверху до кнопки.<head>и<body>теги — это специальные области для очень разных типов элементов. Все, что отображается в DOM, находится в теле. Вы должны прочитать немного больше о HTML, потому что это очень базовая структура, которую вы должны понять, прежде чем двигаться дальше.