Jquery Style switcher - .cssが読み込まれているときにスタイルのちらつきを取り除くには？

私は簡単なコードでスタイルを変えることができます。それはうまく動作しますが、私は防止したいスタイルが点滅しています - 1つの間の少しのタイムアウトは無効にされていて、それ以外はロードされていません -Jquery Style switcher - .cssが読み込まれているときにスタイルのちらつきを取り除くには？

また、私はクッキーを追加して、彼/彼女が入るたびに好みのスタイル。しかし、正直なところ私はjqueryで新しくなったので、それをどうやって行うのか分かりません。だから誰かが私を助けることができるなら、それは素晴らしいだろう！

読んでいただきありがとうございます！

<style type="text/css"> @import url("style.css");</style> 
    <link href="yellow.css" rel="stylesheet" type="text/css" title="Yellow Theme" />

が、私はいつも

<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
    <script type="text/javascript" src="script.js"></script>

各ボタンとしてスクリプトを呼び出すメインスタイルとメインカラーを呼び出すために

HTML：

私は自分のサイト上でのスタイルを切り替えるには、このコードを持っていますこれは次のとおりです。

<a class="colorbox colorred" href="?theme=red" title="Red Theme"><img src="red.png" width="x" height="x" /></a>

ここにscript.jsコードがあります：

google.load("jquery", "1.3.1"); 
    google.setOnLoadCallback(function() 
    { 

// Color changer 
$(".colorblack").click(function(){ 
    $("link").attr("href", "black.css"); 
    return false; 
}); 

$(".colorred").click(function(){ 
    $("link").attr("href", "red.css"); 
    return false; 
}); 

$(".colorwhite").click(function(){ 
    $("link").attr("href", "white.css"); 
    return false; 
}); 

$(".coloryellow").click(function(){ 
    $("link").attr("href", "yellow.css"); 
    return false; 
}); 

    });

出典

2011-07-21 Ari K.

私はこれについてもう少し研究と実験を行いました。私は解決策を見つけたと思います。最初にいくつかの背景情報。私が知る限り、ちらつきの問題は、CSSが完全に読み込まれていないことです。一般に、パフォーマンスは大きな問題でない限り、ページの読み込み時に読み込みを実行する必要があります。必要に応じてそれらを動的にロードすることができますが、ここではまだロードされていないデータを使用しようとしているこの問題が発生します。私が見ることができる最良の解決策は、開始時にすべてのCSSを読み込み、優先順位を動的に変更することです。私はこれを試して、それは動作します。カスケードスタイルシート（CSS）では、名前のカスケード部分は、スタイルシートを読み込んで別のスタイルシートを読み込むと、最後のスタイルシートが優先されます。私の最初の考えは、前のスタイルシートを上書きする別のスタイルシートを単純に追加することでした。そのようにして、ロードされると、古いスタイルシートがまだ使用されていて、ちらつきはありません。私が遭遇した唯一の問題は、リンクされたスタイルシートの優先順位が逆転したことです。つまり、最後のものではなく最初のものを上書きする必要があります。このプロセスを示すコードは次のとおりです。

<html> 
<head> 
<link href="yellow.css" rel="stylesheet" type="text/css" title="Yellow Theme" /> 
<link href="black.css" rel="stylesheet" type="text/css" title="Black Theme" /> 
<link href="white.css" rel="stylesheet" type="text/css" title="White Theme" /> 
<link href="red.css" rel="stylesheet" type="text/css" title="Red Theme" /> 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script> 
$(document).ready(function(){ 

    $(".colorblack").click(function(){ 
    $("link:first").attr("href", "black.css"); 
    return false; 
    }); 

    $(".colorred").click(function(){ 
    $("link:first").attr("href", "red.css"); 
    return false; 
    }); 

    $(".colorwhite").click(function(){ 
    $("link:first").attr("href", "white.css"); 
    return false; 
    }); 

    $(".coloryellow").click(function(){ 
    $("link:first").attr("href", "yellow.css"); 
    return false; 
    }); 

}); 
</script> 
</head> 
<body> 
<a class="colorbox colorred" href="?theme=red" title="Red Theme">red theme</a></br> 
<a class="colorbox colorblack" href="?theme=black" title="Black Theme">black theme</a></br> 
<a class="colorbox colorwhite" href="?theme=white" title="White Theme">white theme</a></br> 
<a class="colorbox coloryellow" href="?theme=yellow" title="Yellow Theme">yellow theme</a></br> 
</body> 
</html>

そしてCSSはかなりシンプルです。例えば

body 
{ 
    background-color:yellow; 
}

これはChromeとFFで動作しますが、IEやOperaでは動作しません。リンクノードの置き換えは、これらの2つではうまくいかないようです。しかし、基本的に、それはあなたがそれを行う方法です。 :)

出典

2011-07-21 13:13:18

こんにちはジョセフ、ありがとうもう一度:) 私は昨夜、別の解決策は、PHPでそれをやっても（私もPHPでクッキーを追加するために考え出した）を発見した。私はあなたの考えを偉大だと考えていますが、私はそれを試してIEで作業していません。また、新しいコードはWordPressのテーマでうまく機能しますが、あなたのことを念頭に置いておきます。ご協力いただきありがとうございます。jqueryを追加していただきありがとうございました。 :) –

私はまだ投票することができないようです:(しかし、あなたの助けは本当に私を指示するのに便利でした！ありがとう –

いいえ問題:)ちょうどあなたが解決策を見つけてうれしい。私はちょうどそれで遊んで楽しいでした。 XD –

あなたが試みることができる1つのリンク要素があります。デフォルトのものは頭の中に最初に置かれ、ユーザーの好みは1秒になります。スタイルシートがカスケードするので、最初のスタイルシートはオーバーライドされます。最初のスタイルシートを同じスタイルシートに置き換えて、ユーザーが望むなら別の選択肢を作ることができます。

出典

2011-07-21 02:56:45

こんにちはジョセフあなたの答えのおかげで、主な問題は、背景が表示されます。例えば、black.cssをロードしている間にbgの色が変わると、バックグラウンドは数秒間白くなります。だから私は多分それが白いBGを取得しないようにスタイルをロードしている間、崖の後にタイムアウトを追加する方法を探しています。しかし、私は運がないとしようとしています。再度、感謝します！ –

これまでにこれまでに試したことはありませんでしたが、私はあなたができることが2番目のものをロードすることを望んでいます。 2番目のものが読み込まれると、最初のスタイルの規則（黄色から。CSS）はまだ有効です。 2番目のスタイルが読み込まれると、スタイルルールが置き換えられます（たとえば背景色）。今すぐ最初のものを置き換えることができます。 2番目のスタイルシートが優先されるため、実際のページの外観は変更されません。今夜はオフラインにする必要がありますが、明日はまだ問題が残っている場合は、私が助けることができるかどうかがわかります。このようなサウンドは、一方的にまたは別の方法で修正するのはかなり簡単です。 :) –

Jquery Style switcher - .cssが読み込まれているときにスタイルのちらつきを取り除くには？

答えて

関連する問題