当我加载我的页面或调整浏览器窗口大小时，css 有加载延迟，用户可以看到没有格式化的页面。这是我的网站:bit.ly/MbyWss
这是我的代码:
我在html中的原始css是estilos_def.css
<body id="body" onresize="start();" onload="start();">
当 body 加载或调整大小时，我调用函数 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";
}
最佳答案
我相信你可以在 css 中做任何事情而无需任何代码...
但如果出于某种原因这是必须的，请在打开的页面上预加载所有 css 文件，将它们从页面中删除，然后在调整大小时重新添加需要的文件，这些文件将从未下载的缓存中使用。
另一种方法是将所有样式保存在一个 css 文件中，并将每个样式中的所有样式绑定(bind)到分配给 body 的某个类名，例如，如下所示:
/* Sheet 1*/
.bodySheet1 div.Main {}
.bodySheet1 .img1 {}
/* Sheet 2*/
.bodySheet2 div.Main {}
.bodySheet2 .img1 {}
/* Sheet 3*/
.bodySheet3 div.Main {}
.bodySheet3 .img1 {}
而不是激活每个工作表，只需为正文分配正确的类名
我仍然相信你根本不需要这样做，你可以在没有任何技巧的情况下用纯 css 完成这一切。
关于css - OnLoad 和调整大小 css 中断，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11156966/