css 样式表加载延迟

Question

我们用 3 种不同的样式 sheet 连接到 index.html 构建了这个单页公司网站，单击按钮后样式 sheet 不断变化。所以颜色、图像、文本颜色.. 所有这些都改变了。

然而，问题 1：该按钮仅在第二次单击时起作用，它会跳过 2 个样式 sheet 并直接从第三个 sheet.

开始

问题2：定期加载 stylesheets 会出现延迟，在应用 stylesheet 之前，所有内容看起来都是放大的，黑白的，没有样式一秒钟。

有什么方法可以解决这两个问题并让它顺利运行吗？

感谢我能得到的任何帮助，谢谢。

这是完整的代码。

https://github.com/Rachaeljessicaabraham/Rachaeljessicaabraham-github.io

Answer 1

第一个问题是你在一、二、三函数中触发的点击函数引起的。像这样删除点击部分：

var one = function () {
    if ($(".head").attr("href") === "headstyles.css") {
      $(".head").attr("href", "headstyles2.css");
    }

    if ($(".feature").attr("href") === "whyusstyles.css") {
      $(".feature").attr("href", "whyusstyles2.css");
    }
    if ($(".testimonials").attr("href") === "carouselstyles.css") {
      $(".testimonials").attr("href", "carouselstyles2.css");
    }
    if ($(".ctr").attr("href") === "services&pricestyles.css") {
      $(".ctr").attr("href", "services&pricestyles2.css");
    }
    if ($(".footer").attr("href") === "footerstyles.css") {
      $(".footer").attr("href", "footerstyles2.css");
    }
};

另一个问题是浏览器在使用前必须加载您的css。您必须像这样预加载 css：

  <link rel="stylesheet" type="text/css" href="./headstyles2.css">
  <link rel="stylesheet" type="text/css" href="./carouselstyles2.css">
  <link rel="stylesheet" type="text/css" href="./footerstyles2.css">
  <link rel="stylesheet" type="text/css" href="./services&pricestyles2.css">
  <link rel="stylesheet" type="text/css" href="./whyusstyles2.css">

  <link rel="stylesheet" type="text/css" href="./headstyles3.css">
  <link rel="stylesheet" type="text/css" href="./carouselstyles3.css">
  <link rel="stylesheet" type="text/css" href="./footerstyles3.css">
  <link rel="stylesheet" type="text/css" href="./services&pricestyles3.css">
  <link rel="stylesheet" type="text/css" href="./whyusstyles3.css">

css 样式表加载延迟

A delay in the loading of css stylesheets

html

javascript

css

delay

visual-glitch