0

我有一个 ASP.NET Core 5 MVC Web 应用程序，它遭受“无样式内容 Flash”（FOUC）的困扰。本质上，我的样式会在页面加载时显示一小段时间。我看到了关于处理 FOUC 的Stack Overflow 问题，建议主要是通过 CSS 或带有 CSS 类的 JavaScript 隐藏页面，然后在页面加载完成后删除该类以显示 HTML。这似乎更像是一种“技巧”，而不是实际的解决方案。我还看到了一些缩小 CSS 和压缩图像的建议。我已经这样做了，但我仍然有 FOUC。

如何避免 FOUC，特别是在 ASP.NET Core 应用程序中？

对于我的具体情况，我的所有链接和样式表都在我的主要共享布局_Layout.cshtml中。在我的所有 HTML 之后，我的 JavaScript 位于页面底部。我的页面顶部确实有一些 Razor 代码，但据我了解，此代码在服务器端运行，不应影响页面加载时间。

4

1 回答 1

0

你可以尝试<html>用 CSS 隐藏你的标签，然后用 JavaScriptwindow.onload函数显示它？

<!DOCTYPE html>
<html style='display: none;'>
<head>
    <script>
        window.onload = function() {
            document.querySelector('html').style.display = '';
        }
    </script>
</head>
<body>
    <h1>My Content</h1>
</body>
</html>
于 2022-01-08T07:27:12.137 回答