在 Laravel 应用程序中删除无样式内容的 flash答案

【问题标题】：Remove flash of unstyled content in a Laravel application在 Laravel 应用程序中删除无样式内容的 flash
【发布时间】：2021-11-04 17:25:00
【问题描述】：

我正在为汽车经销商开发一个简单的网站。我是 Laravel 的新手，这是我第一次处理这样的事情，实际上这是我第一次在我开发的应用程序中看到这样的事情。

所以我理解这个问题，浏览器在应用 CSS 样式之前呈现 HTML，对我来说听起来很合乎逻辑。但是，除了我的 Laravel 应用程序之外，我在其他任何地方都看不到这些？

我阅读了一些关于此的 questions 和 articles，但没有一个解决方案对我有用。

问题：其他网站是如何解决这个问题的，我在 StackOverflow 中看不到？

为什么会这样，我将页面加载优化到最大，但它仍然在 localhost 上闪烁！该网站尚未在任何服务器上。

这是网站加载时间的截图（请记住，这是来自本地主机）

我尝试了以下方法：

在页面顶部：

       <script>
            // Alternative to load event
            document.onreadystatechange = function () {
                if (document.readyState === 'complete') {
                    document.body.style.visibility = 'visible';
                }
            }
        </script>
<body class="g-sidenav-show bg-gray-100 g-sidenav-pinned" style="visibility: hidden !important;"> the rest of the code ...  </body>

也试过了：

 window.onload = (event) => {
        document.body.style.display = "block !important";
        console.log("Loaded!!!!")
    };

实际上没有任何效果！

【问题讨论】：

你是如何加载你的css的？如果它是通过 <link 标签 最初在 <head> 中的 加载的，它应该阻止渲染，直到 css 文件完全加载并被浏览器解析。如果它是通过其他方法加载的，或者通过 javascript 添加到<head>。您会注意到一闪而过的无样式内容。您可以通过隐藏正文直到加载 css 文件（如您提到的文章）来规避此问题。
这个解决方案可能会有所帮助，stackoverflow.com/a/22767958/10213537
@Lars 我就是这样做的
@Lars 这可能是 Laravel 资产方法的问题吗？
@Adelin，我不熟悉 Lavarel，最后是浏览器显示 FOUC。我将首先检查提供给浏览器的初始 html。（这将是 devtools 的网络检查器选项卡中的第一个条目）。如果您注意到 <link 标记不在头部，或者以不同的方式提供。您将确定浏览器将在加载 css 之前呈现。

标签： php html css laravel performance

【解决方案1】：

这种配置应该可以防止任何 FOUC。如果你没有加载 jQuery，你可以使用 vanilla JS。

  $(window).on('load', function() {
     $('.preloader').fadeOut('slow');
  });

.preloader {
    display:block;width:100vw;background-color:white;height:200vh;position:absolute;top:0;left:0;z-index:1000000;
}

&lt;div class="preloader"&gt;&lt;/div&gt;

【讨论】：