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

Question

这个页面安装了光滑的滑块：https://www.christmasbykrebs.com

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

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

但是问题是，当页面加载时，滑块以另一个高度显示半秒，然后在页面加载完成后显示我指定的高度 (350px) 运行s。

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

我想知道是否有办法强制我指定的样式优先于其他样式运行。

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

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;
  }
}

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

Setting height for slick slider only runs after page has finished loading

javascript

css

slider

slick.js