Home/ Questions/Q 8160225
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T18:10:05+00:00

When I load my page or when I resize the browser window, the css

  • 0

When I load my page or when I resize the browser window, the css has a load delay and the user can see the page without formatting. This is my site: bit.ly/MbyWss

This is my code:

My original css in html is estilos_def.css

<body id="body" onresize="start();" onload="start();">

when body is loaded or resized i call the function start

var navWidth, navHeight;
function start(){

    if (self.outerWidth != undefined)
    {
        navWidth = self.outerWidth;
        navHeight = self.outerHeight;
    } else {
        navWidth = document.documentElement.clientWidth;
        navHeight = document.documentElement.clientHeight;
    }
    //Problema com deteçao de width, resolve-o

    if(navWidth>=1600){ //1600 - 1920
        document.getElementById("estA").href="style/estilos_ws.css"
        document.getElementById("titulo_dias").style.height= "10%";

    }else if(navWidth > 1300 && navWidth <1600){ //1300 1600
        document.getElementById('estA').href="style/estilos_1920.css";
        document.getElementById("titulo_dias").style.height= "7%";

    }else if(navWidth >= 1024 && navWidth <=1300){ //1024 - 1280
        document.getElementById("estA").href="style/estilos_def.css"
        document.getElementById("titulo_dias").style.height= "7%";

    }
    lbeats();

    if(navigator.appName =='Microsoft Internet Explorer')
    {
        ie();
    }
    document.getElementById("dias").style.display="none";
    document.getElementById("gal").style.display="none";
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I believe that you could probably do everything in css without any code…

    But if that is a must for some reason, pre-load all css files on page open, remove them from the page and on resize re-add the needed one which will be used from the cache not downloaded.

    Another approach would be to keep all the styles in one css file and make all the styles in each one of them binded to some class name assigned to body for example, like this:

        /* Sheet 1*/
    .bodySheet1 div.Main {}
    .bodySheet1 .img1 {}

    /* Sheet 2*/
    .bodySheet2 div.Main {}
    .bodySheet2 .img1 {}

    /* Sheet 3*/
    .bodySheet3 div.Main {}
    .bodySheet3 .img1 {}

    and instead of activating each sheet, just assign the body the correct className

    I still believe that you don’t need to do this at all, you can probably do it all in pure css without any tricks.

    • 0