我已经为我的网站创建了一个加载屏幕，我希望在打开页面后立即在加载任何CSS之前立即呈现该屏幕。我认为最好的方法是将其放在<head>标记之前，以便浏览器仅在呈现了Laoding屏幕后才开始加载CSS。
但是发生的是，浏览器将头部的所有内容都放到了体内，阻止了我的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将HEAD添加到文档中吗？