Question

我遇到一个问题，就是我的网站在HTML大约一秒钟后就会呈现CSS，因此基本上是白色的未样式化页面，在样式呈现之前会出现一秒钟。在FireFox上，问题更严重。我怎样才能解决这个问题？

Answer 1

我不熟悉wordpress以了解如何实现此功能，但是Laravel确实存在类似的问题。经过一番阅读和发展，我想到了这一点。效果很好。

将其放在头部：

<script type="text/javascript">
    document.documentElement.style.opacity = 0;
    window.addEventListener('load', function () {
        document.documentElement.classList.add("showhtml");
    });
</script>

创建CSS条目：

html.showhtml {
  opacity: 1 !important;
  -webkit-transition: opacity 0.1s;
  transition: opacity 0.1s;
}

它的作用是强制页面在HTML标签上呈现为0。加载后，添加的侦听器“加载”立即生效，并将CSS类showhtml添加到HTMl标签。然后，CSS将页面设置为不透明度1。这是一个优雅的解决方案，您可以控制动画的速度，并且在有人关闭JavaScript的情况下，页面也会显示。

HTML之后的CSS渲染

1 个答案: