0

頭

<head>
<meta charset="UTF-8"/>
<title>abc</title>
<script type='text/javascript' src='/js/jquery-min.js'></script>
<link rel="stylesheet" type="text/css" href="/css/style.css">
<script type='text/javascript' src='/js/service.js'></script>
</head>

domがcssを削除してcssを動的に追加する準備が整う前でもチェックしたい問題 (ファイルパスはjsonオブジェクトから取得します)ちらつきのように）マイページに。アイデア？

service.js 内のメソッド

parse : function(data){
var fileName = data.css;
var styleFound = false;

$('link').each(function(){
    for(i=0; i<fileName.length;i++){
        if($(this).attr('href')=== fileName[i].file){
            styleFound = true;
            $(this).remove();
            console.log(this);
        }
    }
});

if(styleFound){
    for(i=0; i<fileName.length;i++){
         if (document.createStyleSheet)
             document.createStyleSheet(fileName[i].file);
         else {
                $("head").append($("<link rel='stylesheet' type='text/css' href='"+fileName[i].file+"' />"));
        }
    }
}


     },

     };

       getService();
4

2 に答える 2

1

あなたができることは次のようなものです：

最初のページでは、次のような小さなファイルを除いて、css をまったく読み込まないでください。 

 /* hide everything */
    * {
       display: none;
    }
 /* show some sort of loader */
    #loader {
      display: block;
      background: rgba(0,0,0,.8) url(image/loading.gif) no-repeat center center;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      ...
    }

できるだけ早く、JavaScript を使用して、適切なスタイルシートへのリンクをヘッダーに挿入し始めます。

すべてのスタイルシートが読み込まれたら、上記のスタイルシートへのリンクを削除し、おそらく#loaderdiv も削除します。これも JavaScript を使用して行います (コースをスムーズに、そしておそらく、すばやく点滅しないように最小限の遅延の後)。

完璧ではないかもしれませんが、何が起きているかがユーザーに明らかになり、現在の点滅効果は得られません。css ファイルが既にキャッシュに入っているので、物事は十分に速く進むはずなので、戻ってきたユーザーはローダーを見ることはありません。

ただし、この手法の大きな欠点は、javascript を使用しないユーザーには、ローダー以外は何も表示されないことです。

補足として、個人的には、これはサーバーで処理する必要があると思います。ブラウザーの言語ロケールなどに基づいて、ヘッダーに正しいスタイルシートを設定する必要があります...

于 2013-04-09T19:17:02.480 に答える