1

ページを読み込むとき、またはブラウザ ウィンドウのサイズを変更すると、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";
}
4

2 に答える 2

0

そのすべてのJavaScriptで正確に何をしようとしていますか? これを使用して Web ページのサイズを変更するだけの場合は、スクリプトをまったく使用せずに簡単に実行できます。

CSSでこれを行うだけです：

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

スクリプトなしで簡単に実行できることには、スクリプトの使用を常に避ける必要があります。これにより、読み込み時間が短縮され、ページのメモリ サイズが小さくなり、デバッグの量が減ります。

于 2012-06-23T16:00:08.170 に答える
0

おそらくコードなしでcssですべてを実行できると思います...

ただし、何らかの理由でそれが必要な場合は、ページを開いたときにすべてのcssファイルを事前にロードし、ページからそれらを削除し、サイズを変更して、ダウンロードされていないキャッシュから使用される必要なものを再追加します.

別のアプローチは、すべてのスタイルを 1 つの css ファイルに保持し、それぞれのスタイルのすべてを body に割り当てられたクラス名にバインドすることです。たとえば、次のようになります。

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

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

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

各シートをアクティブにする代わりに、本文に正しいクラス名を割り当てるだけです

これを行う必要はまったくないと私はまだ信じています。おそらく、トリックなしで純粋な css ですべてを行うことができます。

于 2012-06-23T17:51:42.847 に答える