Html Question posted in
Some basic documentation can be found here.

Html – delayed load time for js file

so i made a script to change the css file linked depending on time of year. however the load time is too slow when changing page and refeshing, causing my page to load without css for a few seconds. Any thoughts on how to do this? i tried defer and async and changing the listed order of the linked files but it doesnt either, i have a feeling my js code is too slow and changing the href attribute may be an inefficient way for it to work. Any help would be most appreciated

aformentioned html file

<!DOCTYPE html>
<html>
  <head>
  
      <script type="module" src="localimports/scripts/script_for_site_themes.js" type="text/javascript" ></script>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Index</title>
    <link rel="stylesheet" href="localimports/css/style.css">
    <script src="localimports/navbars/header.js" type="text/javascript" defer></script>
    <script src="localimports/navbars/footer.js" type="text/javascript" defer></script>
        <link id="sitebirthday" rel="stylesheet" href="">
    <link id="october" rel="stylesheet" href="">
    <link id="christmas" rel="stylesheet" href="">
    <link id="newyear" rel="stylesheet" href="">
    <link id="normal" rel="stylesheet" href="">


    
    

  </head>
  <body>
  

    <header-component>
    </header-component>
    <main>

below is the linked js file named script_for_site_themes.js that i call on to get my css file


 setInterval(function () {
        var date = new Date();
        var isodate = new Date().toISOString()

        if (date.getMonth()  === 11 && date.getDate()  === 12) {

                                    document.getElementById("sitebirthday").href="https://www.google.co.uk";



        }


        if (date.getDate()  === 9 ) {

                                    document.getElementById("october").href="https://www.google.co.uk";

        }

         if (date.getMonth()  === 11 ) {

                                    document.getElementById("christmas").href="https://www.google.co.uk";



        }


         if (date.getMonth()  === 0 ) {

                                    document.getElementById("newyear").href="https://www.google.co.uk";

        }
        
        
        
         else {

                                    document.getElementById("normal").href="../localimports/css/templateofcssthemes.css";

        }


        








    }, 1000)
    
    






</main>  <br>

<footer-component></footer-component>
Tags:

2

Answers


  1. 0

    You could pull all the css you need in one file and use css selectors to target the stylings based on the time of the year. you could do something like this

    HTML

    <!DOCTYPE html>
<html>
<head>
  <title>Simple HTML Page</title>
</head>
<body>
  <main id="theme" class="">
    This is the main content of the page. You can add paragraphs, headings, images, and other elements here.
  </main>
</body>
</html>

    CSS

     .october {
      color: red;
    }
    
    .christmas {
      color: blue;
    }
    
    .newyear {
      color: green;
    }
    
    .normal {
      color: yellow;
    }

    JS

    const monthNames = ["january", "february", "march", "april", "may", "june",
  "july", "august", "september", "october", "november", "december"
];

function setThemeClass() {
  const today = new Date();
  const currentMonth = monthNames[today.getMonth()]; // Get current month

  const mainElement = document.getElementById("theme");
  let themeClass = "normal"; // Default class

  switch (currentMonth) {
    case "october":
      themeClass = "october";
      break;
    case "december":
      themeClass = "christmas";
      break;
    case "january":
      themeClass = "newyear";
      break;
  }

  mainElement.classList.add(themeClass); // Add the class to the main tag
}

window.onload = setThemeClass;
    Login or Signup to reply.
  2. 0

    You could use the window.onload solution. This fires when all the content has fully loaded (stylesheets, images, etc)

    window.onload = function() {
  // Your JS code
  console.log("Page Loaded!");
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search