时间戳

首页 > 解决方案 > 为光滑滑块设置高度仅在页面完成加载后运行

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

问题描述

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

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

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

然而问题是，当页面加载时，滑块显示半秒钟，另一个高度，然后在页面完成加载后，我指定的高度（350px）运行。

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

我想知道是否有办法强制我指定的样式在任何其他样式之前运行。

您对我如何解决此问题有任何想法，以便在加载页面时运行的其他样式在我添加的样式之前不会运行？

标签： javascriptcsssliderslick.js

解决方案

页面加载时发生的情况是主文件通常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;
  }
}

推荐阅读