html - HTML之后的CSS渲染

html - HTML之后的CSS渲染,第1张

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

最佳答案:

1 个答案:

答案 0 :(得分:0)

我不熟悉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的情况下,页面也会显示。

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复