OnLoad和調整大小的CSS休息

當我加載我的網頁或當我調整瀏覽器窗口的大小時，CSS有加載延遲，用戶可以看到頁面沒有格式。這是我的網站：bit.ly/MbyWss OnLoad和調整大小的CSS休息

這是我的代碼：

我在HTML CSS原來是estilos_def.css

<body id="body" onresize="start();" onload="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"; 
}

來源

2012-06-22 Johny tota

首先，在應用更改之前，我會檢查它們是否有必要（通過與之前的狀態進行比較）。例如，你也可以在'body'標籤上動態設置/刪除類，這樣你就可以使用'body.ie.wide titulo_dias {height：10％}' – biziclop

我相信，你很可能在做的一切的CSS沒有任何代碼...

但如果是出於某種原因必須的，預加載網頁上的所有CSS文件打開，從頁面中刪除，並在調整大小重新添加所需的將從未下載的緩存中使用。

另一種方法是讓所有的樣式在一個CSS文件，並讓所有的樣式綁定分配到身體例如一些類名他們中的每一個，就像這樣：

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

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

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

，而是激活每張紙，只是分配正確的班級姓名

我仍然認爲你根本不需要這樣做，你可以做到這一切純粹的CSS沒有任何竅門。

來源

2012-06-23 17:51:42 AhHatem

你究竟想用JavaScript來做什麼？如果您只是用它來調整網頁大小，那麼可以很容易地完成這個任務，而不需要任何腳本。

只是這樣做在CSS：

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

你應該總是避免使用腳本的東西，沒有它也可以輕鬆完成。這減少了加載時間，降低了頁面的內存大小，並減少了調試量。

來源

2012-06-23 16:00:08 DrinkJavaCodeJava

OnLoad和調整大小的CSS休息

回答

相關問題