时间戳

首页 > 解决方案 > 在部分 HTML 之后加载 css

html - 在部分 HTML 之后加载 css

问题描述

我为我的网站创建了一个加载屏幕，我希望在页面打开后立即呈现，然后再加载任何 css。我认为最好的方法是把它放在<head>标签之前，这样浏览器只有在渲染了加载屏幕后才会开始加载 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 添加到文档中？

标签： htmlcss

解决方案

推荐阅读