Question

光滑的滑块已安装在以下页面中：https://www.christmasbykrebs.com

我已使用以下代码在外部样式表中设置了滑块的高度：

@media screen and (min-height:1024px){
.slick-slide {
    height:350px !important;
}
}

但是问题是，在页面加载过程中，滑块以另一高度显示了半秒钟，然后在页面加载完成后，我指定的高度（350px）运行了。

似乎在我指定的样式之前正在加载另一种样式，但是我不知道它在哪里。我假设在JS文件中的某个地方？

我想知道是否有一种方法可以强制我指定的样式先运行。

您是否知道如何解决此问题，以便在加载页面时运行的其他样式不会在添加样式之前运行？

Answer 1

页面加载时发生的情况是主文件（通常为index.html）已下载。浏览器从上到下开始阅读其内容。在<head></head>部分中，它遇到样式和脚本，并为每个文件向服务器发送请求以收集它们。进行此操作时，浏览器继续运行，并进入<body>部分，开始建立页面的各个部分。因为在此阶段浏览器还没有任何样式（因为浏览器只是发送了获取样式的请求），所以尚未设置任何样式。

回答您的问题。在头部分包括任何样式，以确保存在初始样式。您可以像下面的示例一样包含它。现在，当浏览器阅读主页时，它将首先阅读初始样式，然后构建HTML文档，并在样式表中的其他样式可用时对其进行优化。我希望这会有所帮助。

<head>
  <style>
    @media screen and (min-height:1024px) {
      .slick-slide {
        height: 350px !important;
      }
    }
  </style>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div class="fs-slideshow">
    <div class="slick-slide">slide 1 </div>
    <div class="slick-slide">slide 2 </div>
  </div>
</body>

更新：在本节中尝试以下操作。

 @media screen and (min-width:1024px) {
  .slick-slide {
    max-height: 350px !important;
  }

  /* Likely you are able to omit the below class because we add the bottom one */
  .fs-slideshow {  
    max-height: 350px !important;
  }
  .fs-slideshow__slide {
    max-height: 350px !important;
  }
}

滑动滑块的设置高度仅在页面加载完成后运行

1 个答案: