加载CSS样式表的延迟

问题描述

我们建立了这个一页公司的网站，其中3个不同的样式表连接到index.html，单击按钮后样式表会不断变化。因此，颜色，图像，文本颜色都发生了变化。

但是， 问题1： 该按钮仅在第二次单击时起作用，它会跳过2个样式表，而直接从第三个样式表开始。

问题2： 定期加载样式表会有所延迟，在应用样式表之前，所有样式看起来都被放大了，并且黑白两秒钟都没有样式。

我有办法解决这两个问题并使它顺利运行吗？

感谢我能提供的任何帮助，谢谢。

这是完整的代码。

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

解决方法

第一个问题是由您在一个，两个，三个函数中触发的click函数引起的。只需像这样删除点击部分：

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">