javacriptイベントに表示する前にファイルをプレロードする

Question

PHPでいくつかのCSSファイルが生成されています。

クリックイベントで現在のCSSファイルを変更します。

しかし、それは各変更の間に厄介な白いフラッシュ効果を作ります（それらの最初の読み込み時にのみ、それらがキャッシュにあり、悪影響はありません）。

クリックイベントでこのCSSファイルをどのようにプリロードできますか？

$('.button').click(function(){ 
    // Here I would like to preload the file 
    ... 
    // Here I display it 
    $("#css").attr("href","css.php?id="+$(this).attr('id')); 
}); 

EDIT>ソリューション

/* HTML File */ 
<link type="text/css" rel="stylesheet" href="css.php?id=1" id="css"/> 
<link type="text/css" href="css.php?id=2" id="nextcss"/> 

/* JS file */ 
$('.button').click(function(){ 
    // Preload the file 
    $("#nextcss").attr("href","css.php?id="+$(this).attr('id')); 
    /* Here a lot of code with ajax...*/   
    // Here I display it 
    $("#css").attr("href","css.php?id="+$(this).attr('id')); 
}); 

Answer 1

私は、この「フラッシュ効果は、」CSSがロードされているように、新しいルールをインクリメンタルに適用されている、ということを意味と仮定していますが、あなたはすべてしたいです一度に適用することができます。そうですか？たぶん新しく作成されたcss要素をDOMに追加して（読み込みを確実にする）、スタイルシートとして解釈されないように属性を調整することができます（たとえば、rel="stylesheet"を使用しないなど）。読み込みが完了したら、適切な値で再び調整します。これにより、変更全体が即座に表示されます。

別のオプション（あなたのCSSを変更する必要があります）は、クラスを作成してbodyに適用し、すべてのルールがbody.myclassの要素を参照していることを確認します。 cssがロードされたら、そのクラスをボディに適用します。