Question

当我加载页面或调整浏览器窗口大小时，css有一个加载延迟，用户可以看到没有格式化的页面。这是我的网站：bit.ly/MbyWss

这是我的代码：

我在html中的原始css是estilos_def.css

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

当加载或调整主体时，我调用函数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";
}

Answer 1

你究竟想用所有的javascript做什么？如果你使用它只是为了调整网页的大小，这可以很容易地完成，而不需要任何脚本。

只需在css中执行此操作：

body { min-width: /*Smallest window size in pixels that don't mess up page*/px; }

你应该总是避免使用脚本来实现没有它的情况下可以轻松完成的事情。这减少了加载时间，降低了页面的内存大小，并减少了调试量。

Answer 2

我相信你可以在没有任何代码的情况下在css中做所有事情......

但是如果由于某种原因这是必须的，请在页面打开时预加载所有css文件，从页面中删除它们，然后重新调整大小，重新添加将从未下载的缓存中使用的所需文件。

另一种方法是将所有样式保存在一个css文件中，并将每个样式中的所有样式绑定到一些分配给body的类名，例如：

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

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

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

而不是激活每个工作表，只需为正文分配正确的className

我仍然认为你根本不需要这样做，你可以在没有任何技巧的情况下在纯粹的CSS中完成所有这些。

OnLoad和resize css break

2 个答案: