Search code examples
javascripthtmlcssdelayvisual-glitch

A delay in the loading of css stylesheets

We built this one page company website with 3 different stylesheets connected to the index.html and on clicking a button the stylesheets keep changing. So the colors, images, textcolors.. all of it changes.

However, Problem 1 : The button only works on the second click and it skips 2 stylesheets and directly starts from the third sheet.

Problem 2 : There is a delay in the loading of stylesheets at regular intervals, where it all looks zoomed in and black and white with no styles for a second before the stylesheet is applied.

Is there a way for me to fix these 2 issues and get it to work smoothly ?

Appreciate any help I can get, Thank you.

This is the entire code.

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

Solution

  • The first problem was caused by the click function you fired in the one,two,three functions. Just delete the click part like this:

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

    The other problem is caused by the fact that the browser has to load your css before using it. You have to preload the css like this:

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